Purging unused styles in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable purging unused styles in Tailwind CSS configuration.

Tailwind

module.exports = {
  content: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

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

B"./node_modules/**/*"

C"./public/index.html"

D"./styles/**/*.css"

Attempts:

3 left

💡 Hint

Common Mistakes

Using paths that don't include your source files.

Including node_modules folder which is unnecessary.

The content array tells Tailwind where to look for class names to keep. Using "./src/**/*.{html,js}" includes all HTML and JS files in the src folder, which is typical.

2fill in blank

medium

Complete the code to add a safelist to prevent purging of specific classes.

Tailwind

module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A"bg-red-500 text-center"

B"bg-red-500", "text-center"

C["bg-red-500", "text-center"]

D"bg-red-500"

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string with multiple classes instead of separate strings.

Using nested arrays or incorrect syntax.

The safelist expects an array of strings. Each string is a class name to keep. Here, "bg-red-500" is a single class name in the array.

3fill in blank

hard

Fix the error in the purge configuration to correctly specify the content paths.

Tailwind

module.exports = {
  purge: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A"./src/**/*.{css,js}"

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

C"./src/**/*.{html,js,jsx}"

D"./src/**/*.{html,css}"

Attempts:

3 left

💡 Hint

Common Mistakes

Using outdated purge key without proper file extensions.

Missing important file types like jsx.

In Tailwind v3+, the purge key is replaced by content. But if using purge, it should include all file types where classes appear, like jsx for React files.

4fill in blank

hard

Fill both blanks to configure Tailwind to purge unused styles from HTML and Vue files.

Tailwind

module.exports = {
  content: [[1], [2]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A"./src/**/*.html"

B"./src/**/*.vue"

C"./public/**/*.js"

D"./src/**/*.css"

Attempts:

3 left

💡 Hint

Common Mistakes

Including CSS files which don't contain Tailwind classes.

Missing Vue files in a Vue project.

The content array should include paths to all files that use Tailwind classes. Here, HTML and Vue files are included.

5fill in blank

hard

Fill all three blanks to configure Tailwind with content paths, safelist, and enable JIT mode.

Tailwind

module.exports = {
  mode: [1],
  content: [[2]],
  safelist: [[3]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A"jit"

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

C"text-lg"

D"aos-animate"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect mode value.

Putting multiple classes in one safelist string.

Missing important content paths.

Setting mode to "jit" enables Just-In-Time compilation. The content array points to source files. The safelist includes classes like "aos-animate" that should never be purged.

Practice

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

easy

A. To remove unused CSS classes and make the site load faster

B. To add more CSS classes automatically

C. To change the colors of the website

D. To create new HTML elements

Solution

1. Step 1: Understand what purging means

   Purging means removing things that are not needed. In Tailwind CSS, it removes unused styles.

2. Step 2: Know why removing unused styles helps

   Removing unused styles makes the CSS file smaller, so the website loads faster.

3. Final Answer:

   To remove unused CSS classes and make the site load faster -> Option A

4. Quick Check:

   Purging = Remove unused styles = Faster site [OK]

Hint: Purging means removing unused CSS to speed up loading [OK]

Common Mistakes:

• Thinking purging adds styles instead of removing
• Confusing purging with changing colors or layout
• Believing purging creates new HTML elements

2. Which Tailwind config option tells Tailwind where to look for used CSS classes to purge?

easy

A. theme

B. content

C. plugins

D. variants

Solution

1. Step 1: Identify the config option for purging

   The content option lists files where Tailwind looks for class names to keep.

2. Step 2: Understand other options

   theme controls design tokens, plugins add features, variants control responsive states, so they don't control purging.

3. Final Answer:

   content -> Option B

4. Quick Check:

   content = files to scan for classes [OK]

Hint: Remember: content = where Tailwind looks for classes [OK]

Common Mistakes:

• Choosing theme instead of content
• Confusing plugins with purging config
• Using variants option wrongly

3. Given this Tailwind config snippet:

{
  content: ['./src/**/*.html'],
  theme: { extend: {} },
  plugins: []
}

Which files will Tailwind scan to keep CSS classes?

medium

A. All files in src folder and subfolders with .html extension

B. Only files named index.html in src folder

C. All JavaScript files in src folder

D. No files will be scanned

Solution

1. Step 1: Understand the glob pattern './src/**/*.html'

   This pattern means all .html files inside src and any subfolders.

2. Step 2: Match options with pattern meaning

   All files in src folder and subfolders with .html extension matches the pattern exactly. Options B and C are too narrow or wrong file types. No files will be scanned is incorrect.

3. Final Answer:

   All files in src folder and subfolders with .html extension -> Option A

4. Quick Check:

   ./src/**/*.html = all .html files in src and subfolders [OK]

Hint: ** means any folder depth, *.html means all HTML files [OK]

Common Mistakes:

• Thinking only top-level files are scanned
• Confusing file extensions scanned
• Assuming no files scanned without explicit mention

4. You set the content option incorrectly as ['./src/*.js'] but your classes are in HTML files inside subfolders. What problem will occur?

medium

A. Tailwind will include all styles correctly

B. Tailwind will generate duplicate CSS classes

C. Tailwind will throw a syntax error

D. Tailwind will purge needed styles causing missing styles on the site

Solution

1. Step 1: Analyze the content pattern './src/*.js'

   This pattern only scans JavaScript files directly inside src folder, not HTML or subfolders.

2. Step 2: Understand impact on purging

   Since HTML files with classes are not scanned, Tailwind thinks those classes are unused and removes them, causing missing styles.

3. Final Answer:

   Tailwind will purge needed styles causing missing styles on the site -> Option D

4. Quick Check:

   Wrong content path = missing styles after purge [OK]

Hint: Content must match all files with classes to avoid missing styles [OK]

Common Mistakes:

• Expecting Tailwind to scan files not listed
• Thinking wrong content causes errors instead of missing styles
• Assuming duplicate CSS classes will be generated

5. You want to purge unused styles but keep some dynamic classes added by JavaScript like bg-red-500 and text-xl. How can you ensure these classes are not removed?

hard

A. Write these classes directly in your HTML files only

B. Remove the content option entirely

C. Add these classes to the safelist option in Tailwind config

D. Use a plugin to disable purging

Solution

1. Step 1: Understand dynamic classes and purging

   Classes added by JavaScript are not in HTML files, so Tailwind may remove them during purge.

2. Step 2: Use safelist option to keep classes

   The safelist option lets you list classes to always keep, even if not found in scanned files.

3. Final Answer:

   Add these classes to the safelist option in Tailwind config -> Option C

4. Quick Check:

   Safelist = keep dynamic classes safe from purge [OK]

Hint: Use safelist to protect dynamic classes from purging [OK]

Common Mistakes:

• Removing content option disables purging but is not recommended
• Assuming writing classes in HTML fixes dynamic JS classes
• Thinking disabling purging plugin is best solution