What is the tailwind-patterns skill?
The tailwind-patterns skill is a Markdown reference inside the vudovn/ag-kit toolkit that teaches an agent Tailwind CSS v4 habits. It covers CSS-first theming, container queries, token layers, dark mode and layout recipes. Its allowed tools are Read, Write, Edit, Glob and Grep, and it is guidance, not a generator.
The tailwind-patterns skill opens with a table of what changed from v3 to v4: the config file gives way to a CSS @theme directive, and the Rust-based Oxide engine replaces the old PostCSS plugin. The rest builds on that CSS-first idea.
It is one of 47 skills in AG Kit, an Antigravity-first toolkit of rules, skills, agents and workflows. The skill itself is a single SKILL.md of twelve numbered sections, and the agent may only read, write, edit and search files with it.
The twelve sections in order
- Architecture: what changed from v3, and the core v4 concepts.
- CSS-based configuration: an @theme block with semantic color, spacing and font variables.
- Container queries, plus when to prefer them over breakpoints.
- Responsive design with the mobile-first prefix ladder from sm to 2xl.
- Dark mode strategies: class, media and selector.
- Layout patterns for flexbox and grid, including Bento-style grids.
- Color systems: OKLCH, and three token layers.
- Typography, animation, component extraction, anti-patterns and performance.
Who the tailwind-patterns skill is for
Best for
- Projects on Tailwind CSS v4 where the agent keeps writing v3 habits, such as a JavaScript config file or heavy use of @apply.
- Setting up a theme with semantic tokens so utilities and components draw on one set of variables.
- Reusable components that should respond to their parent width. For a fuller system view, see tailwind-design-system.
Not for
- Projects on Tailwind v3 that have no plan to migrate. The skill treats the v3 config approach as legacy.
- Choosing a visual direction. It gives class patterns, not taste. For that, try ui-ux-pro-max.
- Component library work. It names no specific kit, so pair it with whichever one your project uses.
Use it with UiChemy
Tailwind classes in a code project do not carry into WordPress by themselves. For a WordPress build, design the page in Figma and use Figma to WordPress, or use AI to WordPress. Click Get Started on uichemy.com and review the editor output.
The skill's token layers are a useful bridge to design work. Compare them with design-token and color-system, and check the responsive rules against owl-responsive-design before you hand a design to a converter.
How to install Tailwind Patterns Skill: Tailwind CSS v4 Principles for Agents
npx @vudovn/ag-kit initRun the AG Kit installer
In your project folder, run
npx @vudovn/ag-kit init. This installs the full .agents workspace, so the skill arrives as one of the kit's 47 skills at .agents/skills/tailwind-patterns.Check the requirements
The README asks for Node.js 22 or newer for repository tooling, Python 3.10 or newer for validators, Git, and a trusted Google Antigravity workspace. The published CLI supports Node.js 18 or newer.
Keep the folder visible
Do not add .agents/ to the project .gitignore if the runtime must index skills. To keep it local, add it to .git/info/exclude instead.
Use only the one skill if you prefer
The skill is a single SKILL.md, so you can also clone the repository and copy .agents/skills/tailwind-patterns into your agent's skills folder by hand.
Check that it loaded
Ask the agent to build a card component that adapts to its parent width. It should reach for @container and container-prefixed utilities, define colors in an @theme block, and avoid a JavaScript config file.
Key features
- CSS-first theme exampleThe skill shows an @theme block that defines primary and surface colors in oklch, a spacing scale from xs to lg, and sans and mono font stacks as CSS variables.
- v3 to v4 comparisonA table contrasts the legacy and current approach: config file versus @theme, PostCSS plugin versus the Oxide engine, JIT mode versus always-on, and @apply as still working but discouraged.
- Container query rulesDefine a container with @container on the parent, size children with @sm:, @md: and @lg:, and name a container such as @container/card for specificity.
- Breakpoints versus containersPage-level layouts use viewport breakpoints. Component-level responsive behavior and reusable components use container queries, so they work wherever they are placed.
- Mobile-first ladderWrite base styles with no prefix, then add overrides at sm (640px), md (768px), lg (1024px), xl (1280px) and 2xl (1536px), as in w-full md:w-1/2 lg:w-1/3.
- Dark mode strategiesA table compares the class, media and selector methods and when each fits, with a light and dark pairing for background, text and border utilities.
- Layout recipesFlexbox patterns for centering, stacks and rows, and grid patterns for auto-fit columns, asymmetric Bento grids and sidebar layouts. It says to prefer Bento over symmetric three-column grids.
- Three token layersPrimitive values like a blue-500 variable, semantic names like color-primary, and component tokens like button-bg. OKLCH is recommended for perceptual uniformity.
- Component extraction signalsExtract when the same class combination appears three or more times, when state variants get complex, or when an element belongs to the design system.
- Anti-patterns tableAvoid arbitrary values everywhere, important flags, inline style attributes, duplicated long class lists, mixing v3 config with v4 and heavy @apply. Each has a named alternative.
Frequently asked questions
What is the tailwind-patterns skill?
It is a Markdown reference in the vudovn/ag-kit toolkit that teaches an agent Tailwind CSS v4 principles: CSS-first configuration, container queries, token architecture, responsive and dark mode patterns, layout recipes, and a list of anti-patterns to avoid.
How do I install tailwind-patterns?
Run the AG Kit installer in your project, which sets up the whole .agents workspace including this skill. You can also clone the repository and copy only the tailwind-patterns folder into your agent's skills directory, since the skill is a single SKILL.md.
Which AI coding agents does it support?
The README says Google Antigravity is the primary and supported production runtime. It adds that other tools may read the Markdown components, but their behavior is outside the compatibility guarantee. The repository does not list other agents as supported.
Does the skill cover Tailwind v3?
Only as a contrast. The skill treats v4 as current and the config file approach as legacy, and its anti-patterns table says not to mix v3 config with v4. If your project is on v3, expect advice that does not fit.
What does the skill say about @apply?
It says @apply still works in v4 but is discouraged. The component extraction section allows it sparingly, only when a component layer is not available, and the anti-patterns table lists heavy @apply use as something to replace with components.
When should I use container queries instead of breakpoints?
The skill says to use viewport breakpoints for page-level layouts and container queries for component-level responsive behavior. Reusable components benefit most, because a container query depends on the parent width, not on the screen.
Does the skill give a type scale and color values?
It lists text sizes from text-xs at 0.75rem to text-xl and up at 1.25rem or more, and shows font stack examples. For color it recommends OKLCH and three token layers, with example values in its @theme block rather than a full palette.
What license does it use?
The repository metadata and the README both list the MIT license, credited to Vudovn. The README also states AG Kit is an original open-source implementation with no proprietary source files. Check the repository before redistributing it.