tailwind-css

Configure custom colors and spacing in Tailwind CSS v4 using the `@theme` directive within your CSS file. This modern approach replaces the legacy JavaScript configuration file, allowing you to define design tokens directly in your stylesheets for efficient custom theming.

The best way to use `@apply` for maintainable component styling is within the `@layer` directive. This ensures your custom utility classes and component styles are properly ordered in the CSS cascade, preventing specificity issues and keeping your stylesheets organized.

Responsive design implementation works by appending breakpoint prefixes to Tailwind utility classes, such as `md:` or `lg:`. This mobile-first approach allows you to apply different styling rules based on screen size directly in your HTML markup without writing custom media queries.

Yes, you can refactor existing styles to follow modern Tailwind CSS standards by migrating legacy configurations to the `@theme` directive and consolidating repetitive styles into custom utilities using `@apply`. This ensures your project adheres to v4+ best practices for maintainability.

You need custom utilities when standard Tailwind classes do not cover specific design requirements or interactive states. Define them using the `@layer` directive to maintain CSS ordering and ensure your custom styles integrate seamlessly with the existing framework architecture.

Use the `@theme` directive instead of a JavaScript config file in Tailwind v4 because it allows you to define custom theming variables directly in CSS. This simplifies the build process and ensures your design system configuration adheres to modern styling standards natively.