Purging unused styles in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of purging unused styles in Tailwind CSS?

Why do developers use purging in Tailwind CSS projects?

A To convert CSS classes into inline styles in HTML

B To add more utility classes automatically during build

C To remove unused CSS classes and reduce the final CSS file size

D To disable responsive design features in Tailwind

💡 Hint

Think about how purging affects the size and performance of your website.

Purging removes unused CSS classes from the final build, making the CSS file smaller and faster to load.

📝 Syntax

intermediate

Which Tailwind config snippet correctly enables purging for HTML and JS files?

Select the correct content array in tailwind.config.js to purge unused styles from HTML and JavaScript files.

Tailwind

module.exports = {
  content: [
    // Your answer here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

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

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

💡 Hint

You want to scan files that contain Tailwind class names, usually HTML and JS files.

The content array should include paths to files where Tailwind classes are used, like HTML and JS files.

❓ rendering

advanced

What will be the size difference after purging unused styles in this Tailwind project?

Given a project with 1000 Tailwind utility classes in source files but only 100 are used in HTML, what happens to the CSS file size after purging?

A The CSS file size will be roughly 10% of the original size

B The CSS file size will remain the same

C The CSS file size will increase due to added purge comments

D The CSS file size will be zero because all classes are removed

💡 Hint

Purging removes unused classes, so the size depends on how many classes remain.

Only the classes used in source files remain, so the CSS file shrinks to about 10% if 100 of 1000 classes are used.

❓ selector

advanced

Which Tailwind CSS class will NOT be removed by purge if used dynamically in JavaScript?

You have this JavaScript code: const btnClass = `bg-${color}-500`; where color can be 'red' or 'blue'. Which class must be added to tailwind.config.js safelist to avoid purging?

A bg-red and bg-blue

B bg-${color}-500

C bg-500-red and bg-500-blue

D bg-red-500 and bg-blue-500

💡 Hint

Purge cannot detect dynamic class names unless explicitly safelisted.

Dynamic classes like bg-red-500 and bg-blue-500 must be safelisted to prevent purging.

❓ accessibility

expert

How does purging unused styles affect accessibility in Tailwind projects?

Consider a Tailwind project where purging removes unused utility classes. What is a potential accessibility risk if purging is misconfigured?

A Purging automatically adds ARIA attributes to elements

B Important focus or visibility classes might be removed, breaking keyboard navigation or screen reader support

C Purging disables color contrast checks in browsers

D Purging converts all text to uppercase, harming readability

💡 Hint

Think about what happens if classes controlling focus or visibility are removed.

If focus or visibility classes are removed by mistake, keyboard users or screen readers may lose important cues, harming accessibility.