tailwind-4

Use the `cn()` utility for conditional styling and apply specific patterns for dynamic content and theme variables. This approach prevents common anti-patterns and ensures maintainable styling when working with dynamic values in Tailwind CSS.

Avoid using `var()` in Tailwind CSS classNames because it is a critical anti-pattern that breaks utility class generation. Strict enforcement against `var()` and hex colors ensures maintainable styling and prevents common issues within your styling workflow.

The best way to use the `cn()` utility for conditional styling is to apply it specifically when merging Tailwind CSS classes conditionally. Follow the provided guidelines to understand exactly when to use it and when to avoid the `clsx` or `twMerge` utilities.

You can use arbitrary values in Tailwind CSS utility classes as an escape hatch for specific styling needs, but you must strictly avoid hex colors. Critical rules enforce against using hex colors directly to ensure maintainable styling and prevent common anti-patterns.

Structure responsive design and dark mode patterns with Tailwind CSS utility classes by following the provided common pattern examples for Flexbox, Grid, Spacing, and Typography. These patterns guide your styling decisions and ensure proper state handling across different screen sizes.