Content configuration for tree-shaking in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is content configuration important for Tailwind CSS tree-shaking?

Tailwind CSS removes unused styles during build to reduce file size. Why must you configure the content option correctly?

A To specify the colors Tailwind should use in the project.

B To tell Tailwind which files to scan for class names so it keeps only used styles.

C To define the font sizes Tailwind will generate in the CSS.

D To set the screen sizes for responsive design.

💡 Hint

Think about how Tailwind knows which CSS classes you actually use in your files.

The content option tells Tailwind which files to scan for class names. This helps Tailwind keep only the CSS classes you use, removing unused styles and making your CSS smaller.

📝 Syntax

intermediate

Which content configuration correctly includes all HTML and JS files in the src folder?

Choose the correct content array for Tailwind config to scan all HTML and JS files inside src/ and its subfolders.

A ["./src/**/*.(html|js)"]

B ["./src/*.{html,js}"]

C ["./src/**/.*.{html,js}"]

D ["./src/**/*.{html,js}"]

💡 Hint

Remember the correct glob pattern syntax for matching multiple file extensions.

The pattern ./src/**/*.{html,js} matches all files ending with .html or .js in src and any subfolder. Option D misses subfolders, A uses wrong syntax, and D looks for hidden files.

❓ rendering

advanced

What happens if you omit the content configuration in Tailwind CSS?

Consider a Tailwind project with no content paths set in tailwind.config.js. What will the generated CSS file contain?

A The CSS file will include all Tailwind styles, making it very large.

B The CSS file will include only default colors but no utilities.

C The CSS file will be empty because no files are scanned.

D The build will fail with an error about missing content paths.

💡 Hint

Think about what Tailwind does when it does not know which classes you use.

If no content paths are set, Tailwind generates an empty CSS file because no files are scanned for used classes.

❓ selector

advanced

Which content pattern excludes node_modules but includes JSX files in src?

Choose the content array that scans all JSX files in src/ but excludes node_modules folder.

A ["./src/**/*.{jsx}", "!./node_modules/**/*"]

B ["./src/**/*.jsx"]

C ["./src/**/*.{jsx}", "./node_modules"]

D ["./src/**/*.{jsx}", "!./node_modules"]

💡 Hint

How do you exclude a folder in glob patterns?

Option A correctly includes all JSX files in src and excludes all files inside node_modules using the negation pattern !./node_modules/**/*. Option A excludes node_modules folder itself but not its contents, B does not explicitly exclude node_modules, and C explicitly includes node_modules.

❓ accessibility

expert

How does proper content configuration improve accessibility indirectly?

Why can correct content configuration in Tailwind CSS help improve accessibility of your website?

A By reducing CSS file size, pages load faster, improving user experience for all including assistive tech users.

B By disabling animations that cause motion sickness.

C By generating keyboard navigation styles by default.

D By automatically adding ARIA labels to all elements.

💡 Hint

Think about how performance affects accessibility.

Proper content configuration enables Tailwind to remove unused CSS, making files smaller and pages load faster. Faster loading improves accessibility for users with slow connections or assistive technologies.