# tailwind-patterns

A Claude skill that hands the agent a rulebook for Tailwind CSS v4: CSS-first config, container queries, token architecture. Useful when you build UI with utilities.

- skill · `type=skill` · Claude Code · 2720 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/tailwind-patterns
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/tailwind-patterns

## What it does

The skill spells out how Tailwind v4 works so the agent stops reaching for v3 habits. Configuration lives in CSS now: the `@theme` directive replaces `tailwind.config.js`, and every token is exposed as a `--*` variable. The Oxide compiler is written in Rust, JIT is always on, and CSS nesting is native, so PostCSS is no longer needed for it. `@apply` still works, but the skill lists heavy use of it as something to avoid.

Container queries get their own section: `@container` on the parent, `@sm:`, `@md:`, `@lg:` on children, plus named containers like `@container/card`. Page layouts take viewport breakpoints; reusable components take container queries, because those stay independent of where you drop them. There are tables for dark mode (`class`, `media`, `selector`), flex and grid patterns, the type scale, animations and transitions. Colors are meant to sit in OKLCH and split across three layers: primitive, semantic, component.

A separate table covers anti-patterns. Arbitrary values instead of the scale, `!important`, inline `style=`, duplicated class lists, mixing a v3 config with v4 — the skill flags each as a maintenance problem. It is allowed to use `Read`, `Write`, `Edit`, `Glob` and `Grep`, so it reads and edits files in your project. Install with `npx claude-code-templates@latest --skill creative-design/tailwind-patterns`; the skill lands at `~/.claude/skills/tailwind-patterns/SKILL.md`.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/tailwind-patterns
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill tailwind-patterns -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/tailwind-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tailwind-patterns/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/tailwind-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/tailwind-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates tailwind-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/tailwind-patterns/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/tailwind-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tailwind-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/tailwind-patterns

## When to use it
- move a project from `tailwind.config.js` to `@theme` in CSS
- make a component responsive without tying it to viewport width
- split colors into primitive, semantic and component layers
- pick between a breakpoint and a container query
- spot anti-patterns like `!important` and inline styles in markup

## Example prompts
- Rewrite the Tailwind config as `@theme` in CSS and move colors into semantic tokens
- Make this card responsive with `@container` instead of `md:`
- Check this component against Tailwind v4 anti-patterns and tell me what to fix

## Similar
- [tailwind-v4](https://affpapa.org/en/nevibecode/skills/tailwind-v4.md) — skill · 812 installs
- [tailwind-css-patterns](https://affpapa.org/en/nevibecode/skills/tailwind-css-patterns.md) — skill · 17700 installs
- [tailwind](https://affpapa.org/en/nevibecode/skills/pymodel-tailwind.md) — skill · 512 installs
- [frontend-tailwind-best-practices](https://affpapa.org/en/nevibecode/skills/frontend-tailwind-best-practices.md) — skill · 464 installs
- [tailwind-responsive-ui](https://affpapa.org/en/nevibecode/skills/tailwind-responsive-ui.md) — skill · 461 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 205 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md