Content configuration for tree-shaking in Tailwind - Browser Rendering Trace

Render Flow - Content configuration for tree-shaking

Read tailwind.config.js

↓

Parse content array

↓

Scan specified files for class names

↓

Collect used classes

↓

Remove unused CSS

↓

Generate final CSS bundle

Tailwind reads the content configuration to find which CSS classes are used in your files. It then removes unused styles to keep the CSS small.

Render Steps - 3 Steps

Code Added:content: ['./src/**/*.{html,js}']

Before

[Full Tailwind CSS bundle with all classes]
[Huge CSS file size]
[All classes included]

→

After

[Tailwind CSS bundle filtered]
[Smaller CSS file size]
[Only classes used in src files included]

Adding content paths tells Tailwind where to look for class names to keep, so unused styles are removed.

🔧 Browser Action:Tailwind scans specified files, removes unused CSS, triggers smaller CSS output

Code Sample

This setup scans all HTML and JS files in src folder to keep only used Tailwind classes like bg-blue-500, text-white, and p-4.

Tailwind

<div class="bg-blue-500 text-white p-4">
  Hello, Tailwind!
</div>

Tailwind

module.exports = {
  content: ['./src0*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Render Quiz - 3 Questions

After applying step 1, what happens to the CSS bundle size?

A It becomes smaller because unused classes are removed

B It becomes larger because more classes are added

C It stays the same size

D It disappears completely

Common Confusions - 3 Topics

Why do some Tailwind classes not apply styles even though I wrote them in HTML?

If the file containing those classes is not included in the content array, Tailwind won't see them and will remove those styles during tree-shaking.

💡 Always include all folders and file types where you use Tailwind classes in the content config.

Why does my CSS file size stay large even after configuring content paths?

If your content globs are too broad or include files with many classes, Tailwind keeps all those classes, making CSS bigger.

💡 Use precise file paths and extensions in content to limit scanned files.

Why does adding a new HTML file not show new styles until I restart the build?

Tailwind's watcher may not detect new files outside the configured content paths, so it doesn't update CSS until restarted.

💡 Add new file locations to content array and restart build to see new styles.

Property Reference

Property	Value	Purpose	Visual Effect	Common Use
content	Array of file globs	Files to scan for class names	Determines which CSS classes are kept	Essential for tree-shaking
theme.extend	Object	Customize or add styles	Changes colors, spacing, fonts visually	Add project-specific design
plugins	Array	Add extra utilities or components	Adds new CSS classes or variants	Extend Tailwind functionality

Concept Snapshot

Tailwind's content config lists files to scan for used classes. Only classes found in these files are kept in the CSS bundle. This removes unused styles, making CSS smaller. Update content paths when adding new files. Use precise globs to avoid keeping too many classes.