tailwind-css-patterns

Tailwind uses mobile-first breakpoint prefixes like sm:, md:, and lg: applied before utilities, such as grid grid-cols-1 md:grid-cols-3. Write base styles for mobile first, then add prefixed utilities for larger screens, testing each breakpoint in browser DevTools.

Configure darkMode: 'class' or 'media' in your Tailwind config, then use the dark: variant prefix like dark:bg-gray-900. For class strategy, toggle the dark class on the html element with document.documentElement.classList.toggle('dark').

Yes, Tailwind v4.1 supports CSS-first configuration using the @theme directive in your stylesheet instead of a JavaScript config file. You can define custom colors, fonts, spacing, breakpoints, and animations directly in CSS alongside @import "tailwindcss".

Classes are usually purged because content paths in the config do not include all template files. Verify the content array covers your source files, rebuild the CSS, and safelist any dynamically generated class names.

Prefer composing utility classes directly in markup for maintainability, as the Skill recommends. Reserve @apply for extracting repeated patterns into component classes, since overuse of @apply with complex selectors causes specificity issues.