tailwind-css-patterns

Tailwind uses a mobile-first approach where base classes apply to all screens and breakpoint prefixes like sm:, md:, and lg: apply at larger widths. For example, grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 creates a grid that adapts from one to four columns.

Tailwind supports dark mode via the dark: variant, configured with either the class strategy (toggling a dark class on the html element) or the media strategy (following the OS preference). Apply paired classes like bg-white dark:bg-gray-900 to elements that need theme-aware styling.

Yes, Tailwind v4.1 introduces CSS-first configuration using the @theme directive, letting you define custom colors, fonts, spacing, breakpoints, and animations directly in CSS without a JavaScript config file. Custom utilities can be created with the @utility directive.

Classes are usually missing because content paths in the configuration do not include all template files, so unused-looking classes get purged during the build. Verify the content array covers every file containing class names and rebuild the CSS.

Use focus-visible and focus:ring utilities for visible keyboard focus indicators, sr-only for screen-reader-only text, and motion-reduce to respect reduced-motion preferences. Ensure color contrast meets WCAG ratios of 4.5:1 for normal text and 3:1 for large text.