tailwind-4

Maintaining consistent Tailwind CSS styling requires enforcing semantic classes, using the cn() utility for conditional merges, and banning hex colors or var() in className attributes to reduce class-name bloat.

Use the cn() utility for conditional Tailwind classes when you need to dynamically merge class names based on component state. For static styling where no conditions apply, prefer using a plain className string directly.

You should avoid var() in the Tailwind className attribute because it breaks semantic class consistency and creates anti-patterns. The rules promote semantic Tailwind classes instead of injecting raw CSS variables directly into className strings.

To handle dynamic Tailwind values for responsive and dark mode layouts, follow documented dynamic value patterns. These rules standardize common layout configurations like Flex and Grid to ensure maintainable styling across your frontend components.

The best way to style chart components or library props with Tailwind is to choose appropriate patterns for style-based values. The guidelines dictate when to bypass standard Tailwind classes for library props that require direct style objects.

Standardizing Tailwind CSS usage bans hex colors in favor of semantic classes to ensure uniform styling. This constraint forces developers to use Tailwind's built-in color palette, preventing inconsistent custom color definitions across components.