Content configuration for tree-shaking in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the content files for Tailwind CSS tree-shaking.

Tailwind

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

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

A'./dist/**/*.{css,js}'

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

C'./public/**/*.{html,css}'

D'./assets/**/*.{png,jpg}'

Attempts:

3 left

💡 Hint

Common Mistakes

Including files that don't contain Tailwind classes like images or compiled CSS.

Using wrong file extensions in the content array.

The content array should include the source files where Tailwind classes are used, typically './src/**/*.{html,js}'.

2fill in blank

medium

Complete the code to add multiple content paths for Tailwind CSS tree-shaking.

Tailwind

module.exports = {
  content: [[1], './components/**/*.{vue,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

B'./public/**/*.{css,html}'

C'./assets/**/*.{png,svg}'

D'./dist/**/*.{js,css}'

Attempts:

3 left

💡 Hint

Common Mistakes

Adding folders that don't contain Tailwind classes.

Using incorrect file extensions in the glob pattern.

You can add multiple paths in the content array. './src/**/*.{html,js}' is a common source folder for HTML and JS files.

3fill in blank

hard

Fix the error in the content configuration to properly enable tree-shaking.

Tailwind

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

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

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

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

C('./src/**/*.{html,js}')

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

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an array causes Tailwind to not scan files correctly.

Using parentheses or curly braces instead of square brackets.

The content property must be an array of strings, so it needs square brackets around the path strings.

4fill in blank

hard

Fill both blanks to configure Tailwind to scan HTML and Vue files for tree-shaking.

Tailwind

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

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

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

B'./public/**/*.{css,js}'

C'./components/**/*.{vue,js}'

D'./assets/**/*.{png,jpg}'

Attempts:

3 left

💡 Hint

Common Mistakes

Including folders with no Tailwind classes.

Using wrong file extensions in the glob patterns.

To cover both HTML/JS and Vue files, include './src/**/*.{html,js}' and './components/**/*.{vue,js}' in the content array.

5fill in blank

hard

Fill all three blanks to configure Tailwind content for HTML, Vue, and React files.

Tailwind

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

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

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

B'./components/**/*.{vue,js}'

C'./app/**/*.{jsx,tsx}'

D'./public/**/*.{css,svg}'

Attempts:

3 left

💡 Hint

Common Mistakes

Missing one or more file types in the content array.

Including folders without Tailwind classes.

Include paths for HTML/JS, Vue, and React files to ensure Tailwind scans all relevant files for tree-shaking.