);
}
```
---
## Dark Mode
### Basic Dark Mode Support
```html
Title
Description
```
Enable dark mode in tailwind.config.js:
```javascript
module.exports = {
darkMode: 'class', // or 'media'
// ...
}
```
### Dark Mode Toggle (React)
```tsx
function ThemeToggle() {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
if (darkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [darkMode]);
return (
);
}
```
### Dark Mode Best Practices
1. **Use semantic color names**: Instead of `bg-white` use `bg-surface` custom color
2. **Test with real content**: Some colors look good in light but not in dark
3. **Respect system preference**: Use `darkMode: 'media'` for OS-level preference
4. **Smooth transitions**: Add transition utilities for theme changes
```css
/* Global transition for theme changes */
* {
@apply transition-colors duration-200;
}
```
---
## Container Queries (v4.1+)
Component that responds to its container size, not viewport:
```html
