Configure Tailwind CSS v4 with @theme, @utility, and @variant for React interfaces.
npx skills add https://github.com/antonyfmunoz/OS --skill tailwind-antonyfmunoz
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/tailwind Command: npx skills add https://github.com/antonyfmunoz/OS --skill tailwind-antonyfmunoz
Tailwind v4 helps you build consistent, responsive React UIs without writing custom CSS for every layout or style decision, while avoiding common v3-to-v4 migration pitfalls (like tailwind.config.js).
Use the tailwind skill to set up Tailwind v4 in your saas/ frontend by importing tailwindcss in src/index.css, adding the required dark variant, defining shadcn tokens in :root and .dark, and mapping them via an @theme inline block.
High-intent search queries and answers about installing and using this skill.
Tailwind v4 uses a CSS-first configuration model where you import tailwindcss and define design tokens, custom utilities, and variants directly in CSS using @theme, @utility, and @variant instead of a JavaScript config file.
To set up shadcn theming, define HSL triplets in :root and .dark CSS selectors, then map them using @theme inline so opacity modifiers like bg-primary/80 work correctly with your dark mode class strategy.
Yes, Tailwind v4 supports container queries allowing React components to adapt to their container width rather than the viewport, using @container and variants like @sm: and @lg: for advanced layout controls.
Tailwind v4 works with Remotion for static layouts but has deterministic constraints: you must avoid animate-* and transition-* utilities and use useCurrentFrame instead, ensuring safe rendering in video compositions.
Tailwind detects classes statically, so dynamic class names in string interpolation fail. Use the cn() function with tailwind-merge for conflict-free variant composition and keep class names complete in your JSX.
Tailwind v4 integrates with Vite using the @tailwindcss/vite plugin, replacing the previous PostCSS approach, while you import tailwindcss in your main CSS file to start generating utility-based styling from your markup.
wfvueApply Tailwind CSS v4 utilities with Vite plugin integration for responsive and dark mode styling.
Muath2000Develops React/Next.js/Tailwind UI components and design systems with WCAG 2.2 AA accessibility and RTL support.
imkdwApply Tailwind CSS utility classes with custom design tokens and dark mode.
auxi-wardrobeGenerate accessible, responsive UIs with shadcn/ui and Tailwind CSS.
