tailwind-4

Use the `cn()` utility for conditional Tailwind CSS classes to safely merge and override styles without conflicts. It evaluates conditions and merges class names, ensuring later classes take precedence over earlier ones.

Avoid using `var()` directly in Tailwind CSS class names because it breaks utility class parsing. Instead, use semantic Tailwind theme variables and predefined utility classes to maintain scalable and maintainable styling.

The best way to apply dynamic values in Tailwind CSS is using the `cn()` utility or inline styles for truly dynamic data. Avoid constructing class names dynamically with string interpolation, as Tailwind cannot detect them at build time.

Direct hex colors should not be used in Tailwind CSS utility classes. Use semantic Tailwind colors and theme variables instead to ensure consistency across your project and maintain the ability to update themes globally.

Style library components with Tailwind CSS by using the `cn()` utility to merge your custom classes with the component's default classes. This ensures your custom styles override defaults cleanly without stripping necessary base styles.

Choose the `style` prop over Tailwind CSS utility classes when dealing with highly dynamic values that depend on runtime variables. For static or conditional styling, use the `cn()` utility with semantic classes.