tailwindcss

The TailwindCSS v4 skill is a specialized toolkit for modern web development, focusing on the CSS-first configuration paradigm. It enables developers to manage design systems, styling architectures, and component-level responsive designs without relying on legacy JavaScript-based configuration files. This skill is designed for frontend engineers and UI designers who require precise control over design tokens, custom utility generation, and modern browser-native CSS features like container queries and custom properties. By shifting configuration to standard CSS directives, the skill facilitates seamless integration with frameworks like Vite and ensures compatibility with modern browser standards including Safari 16.4+, Chrome 111+, and Firefox 128+.

• Full support for the @theme directive to define and scale design tokens including colors, typography, spacing, and animations as CSS custom properties.

• Intelligent content detection using the @source directive, allowing for precise control over scanning patterns for HTML, JS, and framework-specific files.

• Advanced customization features including @custom-variant for state-based styling and @utility for creating project-specific shorthand utilities.

• Plugin integration capabilities using the @plugin directive to extend functionality with official Tailwind packages like typography and forms.

• Efficient theming strategies using @theme inline to map existing system CSS variables to Tailwind utilities, facilitating light/dark mode transitions.

• Recommended for projects migrating from Tailwind v3 to v4, specifically those looking to remove build-time complexity associated with tailwind.config.js.

• Use the @theme block for centralizing global design systems, such as color palettes and breakpoints, to maintain consistency across large-scale applications.

• Apply @utility patterns to reduce CSS boilerplate for repetitive tasks, such as flexbox centering or complex scrollbar customization.

• For inputs, provide clean CSS files utilizing Tailwind imports; for outputs, expect generated utility classes optimized for performance.

• Note that this skill enforces modern CSS practices and assumes no reliance on traditional preprocessors like Sass or Less, as Tailwind itself handles the preprocessing engine.