Frontend CSS

Responsive CSS with Tailwind uses mobile-first breakpoints (sm, md, lg, xl) prefixed to utility classes. Apply breakpoint prefixes directly to utilities—e.g., `md:flex` makes elements flex on medium screens and up—then stack responsive rules in your component styles to adapt layouts across devices.

Dark mode in Tailwind uses the `dark:` variant on utility classes to apply alternate styles when dark mode is active. Configure dark mode in `tailwind.config.mjs`, then prefix utilities like `dark:bg-gray-900` to swap colors, backgrounds, and other properties automatically.

Organize CSS with design tokens by defining CSS custom properties in your global CSS file or `tailwind.config.mjs`, then reference them in Tailwind utilities and component styles. This centralizes colors, spacing, and typography so changes propagate across your entire design system.

Configure Tailwind by creating `tailwind.config.mjs`, defining theme values (colors, spacing, breakpoints, dark mode settings), and specifying content paths so Tailwind scans your files for used utilities. Purging removes unused styles, reducing final CSS file size.

@apply directives group Tailwind utilities into reusable component classes when you need consistent styling across multiple elements. Use @apply in global CSS or scoped stylesheets to reduce repetition while maintaining the Tailwind utility approach.

Tailwind CSS includes built-in utilities for both Grid and Flexbox. Use `grid`, `flex`, `grid-cols-*`, and `gap-*` utilities to construct layouts; these abstractions handle responsive adjustments and alignment, making responsive design faster than writing raw CSS.