Implements modern, responsive UI styling using Tailwind CSS v4 utilities and CSS-first configuration patterns.
This skill equips Claude with specialized knowledge for building and maintaining sophisticated user interfaces using Tailwind CSS v4. It streamlines the transition from older versions by enforcing the latest framework standards, such as CSS-first configuration via the @theme directive and the shift from @tailwind directives to standard CSS imports. By focusing on modern patterns like gap utilities for spacing and consistent dark mode variants, this skill ensures that your frontend components are performant, maintainable, and visually consistent across complex applications like Laravel/Inertia stacks.
主要功能
01Tailwind CSS v4 utility mapping and deprecated class replacement
02Consistent dark mode support with automated dark: variant application
03CSS-first configuration management using the @theme directive
04Optimized spacing logic using gap utilities instead of manual margins
05Responsive layout implementation using modern Flexbox and Grid patterns
062 GitHub stars
使用场景
01Building responsive, themeable UI components for React or Vue applications
02Ensuring design system consistency across large-scale internal CRMs and dashboards
03Modernizing legacy Tailwind v3 codebases to v4 standards
