tailwind-css-coding

Handle dynamic Tailwind CSS styling by using the `cn()` utility for conditional class composition and inline styles for truly dynamic values. This prevents common antipatterns like constructing class names dynamically, ensuring styles are correctly applied and purged safely.

The best way to merge Tailwind classes safely is by using `tailwind-merge`. This ensures safe class composition, resolves conflicting utility classes, and maintains adherence to project conventions when refactoring components.

Ensure accessibility in Tailwind CSS by explicitly defining focus states for interactive elements and utilizing screen reader text utilities. This Skill highlights these practices to prevent visual bugs and improve overall user experience.

Yes, this approach supports dark mode and responsive design by emphasizing consistent dark mode implementation and promoting mobile-first breakpoint usage. It enforces correct application of responsive variants and dark mode styles to prevent visual bugs.

Avoid arbitrary values in Tailwind CSS to maintain cleaner, more maintainable code. This Skill enforces best practices by preventing common antipatterns, ensuring adherence to project conventions, and requiring a solid understanding of utility class behavior across Tailwind v3 and v4.