```
**Rule of thumb**: Use inline utilities by default. Only reach for `@apply` when:
1. You need to style elements you don't control (CMS content, markdown)
2. You're building a component library with `.btn`, `.card` classes
3. A combination of 5+ utilities is repeated identically in 5+ places
## Custom Variants
### addVariant (v3)
```js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function ({ addVariant }) {
// Simple variant
addVariant('hocus', ['&:hover', '&:focus'])
addVariant('supports-grid', '@supports (display: grid)')
addVariant('optional', '&:optional')
// Parent state
addVariant('group-sidebar', ':merge(.group-sidebar):hover &')
}),
],
}
```
### @custom-variant (v4)
```css
/* v4: Define custom variants in CSS */
@custom-variant hocus (&:hover, &:focus);
@custom-variant optional (&:optional);
@custom-variant supports-grid (@supports (display: grid));
/* Dark mode with custom selector */
@custom-variant dark (&:where(.dark, .dark *));
/* Dark mode with data attribute */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
```
```html
```
### Data Attribute Variants
```html
Responds to data-state attribute
Responds to data-size
Loading state
```
## Prefix Configuration
### v3: Avoiding Conflicts
```js
// v3: Add prefix to all Tailwind classes
module.exports = {
prefix: 'tw-',
}
```
```html
```
### v4: Prefix
```css
/* v4: Prefix via @import option */
@import "tailwindcss" prefix(tw);
```
## Important Configuration
### v3: Important Selector Strategy
```js
// v3: Make all utilities important
module.exports = {
// Option 1: All utilities get !important
important: true,
// Option 2: Selector strategy (recommended)
important: '#app',
}
```
### Per-Utility Important
```html
This text is red regardless of other styles
Background is red
```
## Dark Mode Configuration
### Class Strategy (v3)
```js
// v3: tailwind.config.js
module.exports = {
darkMode: 'class', // Toggle via class="dark" on
}
```
```html
```
### Media Strategy (v3 and v4 Default)
```js
// v3: Uses system preference (prefers-color-scheme)
module.exports = {
darkMode: 'media', // Default in v4
}
```
### Selector Strategy (v4)
```css
/* v4: Class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));
/* v4: Data attribute dark mode */
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
```
### Dark Mode Toggle Script
```html
```
## Container Queries
### Setup (v3)
```bash
npm install @tailwindcss/container-queries
```
```js
// v3: tailwind.config.js
module.exports = {
plugins: [require('@tailwindcss/container-queries')],
}
```
### Setup (v4)
Container queries are native in v4. No plugin needed.
### Usage
```html
Responds to parent width
Not viewport width
```
### Container Query Breakpoints
| Variant | Min Width |
|---------|-----------|
| `@xs:` | 320px (20rem) |
| `@sm:` | 384px (24rem) |
| `@md:` | 448px (28rem) |
| `@lg:` | 512px (32rem) |
| `@xl:` | 576px (36rem) |
| `@2xl:` | 672px (42rem) |
| `@3xl:` | 768px (48rem) |
| `@4xl:` | 896px (56rem) |
| `@5xl:` | 1024px (64rem) |
### Container Query Units
```html
50% of container width, 30% of container height
```
| Unit | Description |
|------|-------------|
| `cqw` | 1% of container width |
| `cqh` | 1% of container height |
| `cqi` | 1% of container inline size |
| `cqb` | 1% of container block size |
| `cqmin` | Smaller of `cqi` / `cqb` |
| `cqmax` | Larger of `cqi` / `cqb` |
### Nested Containers
```html
```