tailwind-4

Use the cn() utility for conditional Tailwind CSS class names to merge conflicting classes cleanly and maintain consistent component styling. It prevents duplicate or overridden utility conflicts when dynamically composing class strings based on component state.

Avoid var() and hex colors in Tailwind className strings to enforce semantic design system alignment. Using Tailwind's built-in color utilities instead ensures consistent theming, prevents visual drift, and maintains a maintainable frontend styling architecture.

The best way to handle dynamic styling values in Tailwind CSS is using inline style props for completely arbitrary runtime values, while relying on predefined utility classes and the cn() helper for standard conditional and responsive layout patterns.

Use style props instead of Tailwind utility classes when dealing with highly dynamic runtime values that cannot be predetermined, adhering to a styling decision tree that reserves className for static, semantic, and responsive design system patterns.

Align responsive layouts with a design system by applying semantic Tailwind CSS utilities for breakpoints and spacing, avoiding inline hex colors, and using the cn() helper to cleanly compose conditional responsive class names.