tailwind-css-patterns

Use grid utilities with responsive prefixes, such as grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4, to stack items on mobile and expand columns on larger screens. Tailwind is mobile-first, so base classes apply to small screens and prefixes override them at larger breakpoints.

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

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 avoid constructing class names dynamically at runtime since the scanner only detects literal strings.

Yes, Tailwind v4.1 supports container queries using the @container class on a parent and variants like @lg: or @[400px]: on children. This lets components respond to their container width rather than the viewport size.

Prefer composing utility classes directly in markup for maintainability, and reserve @apply for extracting repeated patterns into component classes within @layer components. Overusing @apply with complex selectors can cause specificity issues and larger stylesheets.