tailwindcss

Utility-first CSS applies small, composable classes directly to elements instead of writing custom stylesheets. Tailwind CSS generates optimized classes at build time, scanning your project files and emitting only the utilities you use, eliminating unused CSS and enabling responsive, state-based styling across React, Vue, Svelte, Next.js, and other frameworks.

Tailwind CSS works framework-agnostic with common bundlers and integrates directly into React, Vue, Svelte, Next.js, and Astro projects. Configure content paths pointing to your template files, import Tailwind CSS, and the build-time processor scans and generates only the utilities your project uses.

Tailwind performs build-time processing and tree-shaking by scanning your source files for utility class names and emitting only those declarations to your final CSS. Unused utilities are purged automatically, removing runtime CSS bloat and delivering smaller, optimized stylesheets.

Responsive layouts with Tailwind use responsive prefixes (e.g., `md:`, `lg:`) applied directly to utility classes in your markup. This utility-first workflow eliminates separate media query files and enables you to define breakpoint-specific styling inline, making responsive design transparent and maintainable across components.

Tailwind CSS enables dark mode through configuration and token-driven styling via design tokens. Configure dark mode variants, apply token-based color, spacing, and typography scales, and use utility classes to implement consistent theming and state-based styling across your responsive layouts.

Tailwind's utility-first approach minimizes custom CSS. Compose pre-built utilities for most styling needs; custom CSS is optional for edge cases. The build-time workflow handles CSS generation and optimization, so you focus on applying utilities to HTML rather than writing stylesheets.