tailwind-4

Use the cn() utility to combine and deduplicate Tailwind classes conditionally. It resolves conflicts automatically, ensuring only the final intended class applies—critical for component libraries where multiple style states overlap.

Combine Tailwind's responsive prefixes (sm:, md:, lg:) with grid and flex utilities to craft layouts that adapt across breakpoints. Apply dark mode variants and state modifiers (hover:, focus:) consistently using the cn() pattern for maintainability.

Define theme variables in your Tailwind config and reference them via CSS custom properties. Use safe arbitrary values sparingly—validate they won't conflict with future utilities—and document token usage across your component library to enforce consistency.

Yes. Standardize component styling by adopting cn() for conditional classes, responsive utilities for layout, and theme variables for colors and spacing. This ensures consistent styling across all components without requiring extra tooling or refactoring everything at once.

Avoid using var() directly in className—reference theme variables through Tailwind config instead. Don't mix arbitrary values carelessly; validate they're safe and maintainable. Enforce cn() usage to prevent class conflicts in dynamic or conditional rendering.