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.