Content configuration for tree-shaking in Tailwind - Mini Project: Build & Apply

Content Configuration for Tree-Shaking in Tailwind CSS

📖 Scenario: You are building a simple webpage using Tailwind CSS. To keep your CSS file small and fast, you want to configure Tailwind to remove unused styles by specifying exactly which files to scan for class names.

🎯 Goal: Set up Tailwind CSS content configuration to enable tree-shaking by listing the correct files where Tailwind should look for class names.

📋 What You'll Learn

Create a Tailwind config file with a content array

Include the ./src/**/*.{html,js} pattern in the content array

Add the ./public/index.html file path in the content array

Export the configuration object correctly

💡 Why This Matters

🌍 Real World

Web developers use Tailwind's content configuration to keep CSS files small and fast by removing unused styles automatically.

💼 Career

Knowing how to configure Tailwind for tree-shaking is important for frontend developers to optimize website performance and load times.

1

Create the Tailwind config file skeleton

Create a file named tailwind.config.js and start by writing module.exports = {} to export an empty configuration object.

Tailwind

# Your code here
// Create module.exports with an empty object

Need a hint?

Use module.exports = {} to export the config object.

2

Add the content array to the config

Inside the exported object, add a content property and set it to an empty array [].

Tailwind

module.exports = {
  // Add content array here
  content: []
}

Need a hint?

The content property tells Tailwind which files to scan.

3

Add file paths to the content array

Add the strings './src/**/*.{html,js}' and './public/index.html' inside the content array.

Tailwind

module.exports = {
  content: [
    // Add file paths here
  ]
}

Need a hint?

Use glob patterns to include all HTML and JS files in src and the main HTML file in public.

4

Complete and export the Tailwind config

Make sure the entire config object is correctly exported with the content array containing the two file paths. The file should start with module.exports = { and end with }.

Tailwind

module.exports = {
  content: ['./src/**/*.{html,js}', './public/index.html']
  // Complete the export
}

Need a hint?

Check that the export syntax is correct and the content array is included.