Content Configuration
- Content Configuration in Tailwind CSS defines the files (HTML, JS, etc.) that Tailwind scans to detect and generate the used utility classes.
What is Content Configuration in Tailwind CSS ?
In Tailwind CSS, content configuration tells Tailwind:
Which files contain Tailwind class names
Where to look for those class names
Which utilities should be generated
Which utilities should be removed
In simple terms:
Tailwind only generates CSS for classes it finds in your content files.
This is how Tailwind avoids shipping thousands of unused utilities.
Why Content Configuration Exists
Traditional CSS frameworks:
Ship everything
Include lots of unused styles
Increase CSS size
Tailwind solves this by:
Scanning your project files
Detecting used utilities
Removing everything else
In modern Tailwind, it is handled via the content property.
purge vs content
Older Tailwind Versions
Used:
purge: [ ]
Modern Tailwind Versions
Use:
content: [ ]
Important:
purge is deprecated
content is the correct and current approach
Where Content Configuration Lives
Content configuration is defined inside:
tailwind.config.js
Example base structure:
module.exports = {
content: [ ],
theme: {
extend: { },
},
plugins: [ ],
}
This section is mandatory for Tailwind to work correctly.
How Tailwind Uses Content Paths
Tailwind performs the following steps:
Reads the content array
Opens each listed file
Searches for Tailwind class names
Generates CSS only for those classes
If a file is not listed, Tailwind:
Will NOT scan it
Will NOT generate utilities used inside it
Basic Content Configuration
For a simple HTML project:
module.exports = {
content: ["./src/index.html"],
theme: {
extend: { },
},
plugins: [ ],
}
This tells Tailwind:
Scan only index.html
Ignore all other files
This works for very small projects.
Recommended Content Configuration
Most projects use multiple files.
Recommended configuration:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: { },
},
plugins: [ ],
}
Meaning:
./src/ → start from source folder
**/* → scan all subfolders
{html,js} → scan HTML and JavaScript files
This is the most commonly used setup.
Content Configuration for Different Project Types
Plain HTML Project
content: ["./src/**/*.html"]
JavaScript-Based UI
content: ["./src/**/*.{html,js}"]
Framework-Based Projects
Examples (conceptual):
React → JSX / TSX files
Vue → .vue files
content: ["./src/**/*.{html,js,jsx,ts,tsx}"]
The rule is simple:
List every file type where Tailwind classes appear.
Why Incorrect Content Paths Break Tailwind
This is the most common Tailwind issue.
Symptom
Tailwind classes don’t work
Generated CSS file is empty or very small
Cause
Files using Tailwind classes are not included in content
Example Mistake
content: ["./index.html"]
But actual file is:
src/index.html
Tailwind scans the wrong path → generates nothing.
Dynamic Class Names
Tailwind scans static class names only.
Problematic Example
<div class="bg-" + color></div>
Tailwind cannot detect:
bg-red-500
bg-blue-500
Because they are generated dynamically.
Correct Approach
Explicitly include all possible classes:
<div class="bg-red-500 bg-blue-500"></div>
Or use safelisting (advanced).
Safelisting Classes (Conceptual Overview)
Safelisting tells Tailwind:
“Always include these classes, even if not found”
Conceptual example:
safelist: [
'bg-red-500',
'bg-blue-500',
]
This is useful when:
Classes are generated dynamically
Content comes from APIs
Class names are conditionally applied
Safelisting should be used carefully.
Content Configuration & Performance
Good content configuration:
Reduces CSS size
Improves load time
Improves runtime performance
Bad configuration:
Generates unused CSS
Slows down builds
Breaks styling
Content paths are a performance tool, not just setup syntax.