Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
Quickly install tailwind-v4 AI skill to your development environment via command line
Source: artivilla/agents-config.
| Configuration | tailwind.config.js | @theme in CSS | | Build Tool | PostCSS plugin | @tailwindcss/vite | | Colors | rgb() / hsl() | oklch() (default) | | Theme Extension | extend: {} in JS | CSS variables | | Dark Mode | darkMode config option | CSS variants |
default (standard mode) Generates CSS variables that can be referenced elsewhere:
Note: You can also use @theme default explicitly to mark theme values that can be overridden by non-default @theme declarations.
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4. Source: artivilla/agents-config.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/artivilla/agents-config --skill tailwind-v4Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4. Source: artivilla/agents-config.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/artivilla/agents-config --skill tailwind-v4 Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/artivilla/agents-config