CSS
Cap nhat 10 thg 1, 2026Tailwind CSS Tips & Tricks
Productivity tips for Tailwind CSS: responsive design, dark mode, custom utilities, and common patterns.
Responsive Breakpoints
Mobile-first: no prefix = mobile. `sm:` = 640px, `md:` = 768px, `lg:` = 1024px, `xl:` = 1280px.
Dark Mode
Use `dark:` prefix. Enable class-based dark mode in config for manual toggle support.
Common Patterns
- Centering: `flex items-center justify-center`
- Truncate text: `truncate` or `line-clamp-2`
- Responsive grid: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`
Performance
- PurgeCSS is built-in. Only used classes are in production.
- Use `@apply` sparingly. Prefer utility classes in markup.
- Group related utilities with consistent ordering: layout, spacing, typography, colors.