Content configuration for tree-shaking in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is tree-shaking in Tailwind CSS?

Tree-shaking is a process that removes unused CSS styles from the final build, making the file smaller and faster to load.

beginner

Why do we need to configure the content option in Tailwind's config file?

The <code>content</code> option tells Tailwind where to look for class names in your files so it can keep only the styles you actually use.

intermediate

Which file types should you include in the content array for effective tree-shaking?

Include all files where you write Tailwind classes, like .html, .js, .jsx, .ts, .tsx, and .vue files.

intermediate

What happens if you forget to include some files in the content array?

Tailwind will remove styles used only in those files, causing your site to lose those styles and look broken.

beginner

How can you write the content array to include all HTML and JavaScript files in your project?

Use glob patterns like "./src/**/*.{html,js,jsx,ts,tsx,vue}" to include all files in the src folder and its subfolders.

What is the main purpose of the content option in Tailwind CSS config?

A To enable dark mode

B To set the color palette for the project

C To define custom fonts

D To specify where Tailwind looks for class names to keep

The content option tells Tailwind which files to scan for class names to include in the final CSS.

Which of these file patterns is best to include in the content array for React projects?

A ./src/**/*.{js,jsx,ts,tsx}

B ./src/**/*.{html,css}

C ./public/**/*.{html,js}

D ./styles/**/*.{css,scss}

React projects use JavaScript and TypeScript files with extensions like .js, .jsx, .ts, and .tsx where Tailwind classes are written.

What will happen if you include too many unrelated files in the content array?

A Tailwind will generate a larger CSS file with unused styles

B Tailwind will crash during build

C Tailwind will remove all styles

D Tailwind will ignore those files

Including unrelated files can cause Tailwind to keep unused styles, making the CSS file bigger.

Which of these is NOT a valid way to specify files in the content array?

A ./components/**/*.jsx

B ./src/**/*.{png,jpg}

C ./styles/*.css

D ./src/**/*.{html,js}

Images like .png and .jpg do not contain Tailwind classes, so including them in content is unnecessary.

Why is tree-shaking important for website performance?

A It adds more animations

B It changes colors automatically

C It reduces CSS file size, making pages load faster

D It disables unused JavaScript

Tree-shaking removes unused CSS, which reduces file size and speeds up page loading.

Explain how to configure the content option in Tailwind CSS for effective tree-shaking.

Think about where you write your Tailwind classes and how Tailwind finds them.

Describe what could go wrong if the content array is not set correctly in Tailwind CSS configuration.

Consider the impact on the website's look and performance.