0
0
Tailwindmarkup~5 mins

Content configuration for tree-shaking in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tree-shaking helps remove unused CSS to make your website faster and smaller. Content configuration tells Tailwind where to look for your HTML and JavaScript files so it knows which styles to keep.

When you want to make your website load faster by removing unused styles.
When you add new HTML or JavaScript files and want Tailwind to include their styles.
When you organize your project files in different folders and need to tell Tailwind where to find them.
When you want to avoid large CSS files that slow down your site on phones or slow internet.
When you want to keep your CSS file size small for better performance.
Syntax
Tailwind
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './public/index.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

The content array lists file paths where Tailwind looks for class names.

Use glob patterns like **/*.{html,js} to include many files in folders and subfolders.

Examples
This example includes many file types inside the src folder, useful for React or TypeScript projects.
Tailwind
content: ['./src/**/*.{html,js,jsx,ts,tsx}']
This example tells Tailwind to scan all HTML files inside the public folder and its subfolders.
Tailwind
content: ['./public/**/*.html']
This example shows multiple folders with different file types to cover more parts of your project.
Tailwind
content: ['./app/**/*.{html,js}', './components/**/*.{js,jsx}']
Sample Program

This simple HTML page uses Tailwind classes. The CSS file output.css is generated by Tailwind using content configuration to include only used styles.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind Content Config Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
  <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind!</h1>
  <p class="mt-4 text-gray-700">This page uses content configuration for tree-shaking.</p>
</body>
</html>
OutputSuccess
Important Notes

Always update the content paths when you add new files or folders with Tailwind classes.

If Tailwind misses styles, check your content paths first.

Using too broad paths can include unused styles, making CSS bigger.

Summary

Content configuration tells Tailwind where to find your HTML and JS files.

This helps Tailwind remove unused CSS, making your site faster.

Keep your content paths accurate and updated for best results.