tailwind-configurationlisted
Install: claude install-skill diegosouzapw/awesome-omni-skill
# Tailwind CSS - Configuration
Tailwind CSS is highly customizable through its configuration file, allowing you to define your design system, extend the default theme, and configure plugins.
## Key Concepts
### Configuration File Structure
The `tailwind.config.js` (or `.ts`, `.cjs`, `.mjs`) file is the heart of Tailwind customization:
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
// Custom theme extensions
},
},
plugins: [],
darkMode: 'class', // or 'media'
prefix: '',
important: false,
separator: ':',
}
```
### Content Configuration
The `content` array tells Tailwind where to look for class names:
```javascript
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./public/index.html',
],
// ...
}
```
#### Content with Transform
For dynamic class names, use safelist or content transform:
```javascript
module.exports = {
content: {
files: ['./src/**/*.{html,js}'],
transform: {
md: (content) => {
// Extract classes from markdown
return content
}
}
},
safelist: [
'bg-red-500',
'bg-green-500',
{
pattern: /bg-(red|green|blue)-(100|200|300)/,
},
],
}
```
##