tailwind-4

For Tailwind CSS 4 dynamic values like custom widths, use the style prop directly instead of constructing class names. Consult the styling decision tree to determine exactly when to use className, style, or the cn() utility.

Use the cn() utility for conditional styling and merging classes in Next.js. It provides a structured approach to combine multiple class names conditionally, ensuring clean component styling without class conflicts.

Avoiding var() and hex colors in Tailwind className prevents parsing errors and maintains consistency. Instead, map dynamic values through the style prop or define them within the Tailwind configuration to ensure the compiler correctly processes styles.

Implement responsive design and dark mode in Tailwind CSS 4 using built-in variant prefixes. Apply common patterns for Flexbox, Grid, Spacing, and Typography by appending responsive and dark state modifiers directly to utility classes.

Yes, Tailwind CSS 4 works seamlessly with Next.js for frontend styling. It provides specific patterns for applying styles within Next.js applications, guiding you through the decision tree to choose between className, style, or cn().

Use the style prop instead of utility classes when applying completely dynamic values derived from runtime variables. Tailwind CSS 4 cannot generate utility classes for arbitrary runtime values, so the style prop is necessary to inject dynamic styling.