Enforce Tailwind v4 design tokens by replacing hardcoded colors and inline styles.
npx skills add https://github.com/themewagon/astrodeck --skill tailwind-themewagon
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/themewagon/astrodeck/tree/main/.claude/skills/tailwind Command: npx skills add https://github.com/themewagon/astrodeck --skill tailwind-themewagon
This skill helps teams enforce a scalable, consistent design system by replacing hardcoded colors and inline styles with semantic tokens and a centralized Tailwind v4 setup.
Configure your project to use Tailwind CSS v4 with the @theme directive and OKLCH tokens, and replace all hardcoded colors and inline styles with semantic, token-driven utilities.
High-intent search queries and answers about installing and using this skill.
To migrate Astro projects to Tailwind v4, replace your tailwind.config.mjs with CSS-based configuration using the @theme directive. This establishes a centralized setup, eliminating JavaScript config files in favor of native CSS token registration for UI components.
The best way to manage dark mode in Tailwind v4 is using semantic OKLCH tokens via the @theme directive. This handles theme changes centrally through semantic tokens rather than piling up color utilities, minimizing drift across components.
Eliminate hardcoded colors and inline styles by registering centralized OKLCH tokens with the Tailwind v4 @theme directive. Replace all literal color values in your UI components with these semantic, token-driven utilities to ensure design consistency.
Yes, this Tailwind v4 token approach requires the OKLCH color format. By enforcing semantic OKLCH tokens within the @theme directive, the system ensures scalable color consistency and accurate perceptual brightness across your design system.
Design teams should use semantic tokens to enforce a scalable, consistent design system. Semantic tokens centralize color definitions via the @theme directive, preventing visual drift and ensuring maintainable dark mode support across all UI components.
elab-developmentAutomate web interface styling with Tailwind CSS v4 utilities.
holger1411Replace hardcoded colors and inline styles with Tailwind v4 semantic tokens.
wfvueCreate a Tailwind v4 design system with CSS-first tokens and CVA components.
gouravsingh311Configure Tailwind v4 design tokens using CSS-first @theme directives.
