tailwind-css

Configure Tailwind CSS v4 using a CSS-only setup that replaces the legacy JavaScript configuration file. This approach allows you to define theme variables and custom utilities directly within your CSS files for maintainable styling.

Create type-safe UI components using Tailwind CSS by integrating the tailwind-variants library. It enables composable variant styling, allowing you to manage complex component states and props without conflicting utility classes.

Yes, you can integrate Tailwind CSS v4 with CSS Modules. The skill provides best practices for combining utility classes with modular CSS to ensure styles remain scoped and maintainable across your components.

Add animations to Tailwind CSS components using the tw-animate-css library. It provides utility classes for dynamic user interfaces, allowing you to apply complex transitions and keyframe animations directly in your markup.

Implement responsive design and dark mode in Tailwind v4 using built-in variant modifiers. The skill covers applying responsive breakpoints and dark mode toggles to ensure your UI adapts to different screen sizes and color schemes.

Migrating to Tailwind CSS v4 requires refactoring existing layouts to match new best practices and the CSS-first configuration model. Developers must adapt typography, theming, and component variants to the updated architecture.