# tailwindcss

Guides coding agents through Tailwind CSS v4 component styling using project tokens, explicit utility classes, and accessible layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 447 installs · ★ 643
- Author: Pedro Nauck
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/pedronauck/skills/tree/HEAD/skills/mine/tailwindcss/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/pedro-nauck-tailwindcss

## What it does

This skill configures the assistant to work with Tailwind CSS v4 component styling. It enforces local project design tokens instead of assuming generic shadcn schemas. The agent inspects code using `Read`, `Grep`, and `Glob` to align with established theme files.

Dynamic class interpolation such as `bg-${color}-500` is banned. Because Tailwind relies on static discovery, incomplete class strings break the stylesheet build. The model must use explicit lookup objects, group long utilities cleanly, and handle overrides via the local `cn` helper.

Specificity issues must be solved without `!important`. The rules also require preserving visible keyboard focus states and relying on the repository's native validation scripts rather than inventing separate styling checks.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tailwindcss -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tailwindcss -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tailwindcss -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pedronauck/skills tailwindcss
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tailwindcss -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pedronauck/skills --path skills/mine/tailwindcss
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pedronauck/skills --skill tailwindcss -a opencode
```

### 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/pedronauck/skills/tree/HEAD/skills/mine/tailwindcss/SKILL.md

## When to use it
- Style component variants with Tailwind CSS v4 utilities
- Replace interpolated class names with static lookup maps
- Resolve component variant overrides via the project cn helper
- Preserve visible keyboard focus on interactive elements

## Example prompts
- Style this alert component using our Tailwind v4 tokens and the local cn utility.
- Refactor this badge to eliminate interpolated class strings with a lookup table.
- Build a responsive navigation bar while preserving visible keyboard focus rings.

## Similar
- [tailwindcss-animations](https://affpapa.org/en/nevibecode/skills/tailwindcss-animations.md) — skill · 2400 installs
- [tailwindcss-mobile-first](https://affpapa.org/en/nevibecode/skills/tailwindcss-mobile-first.md) — skill · 2100 installs
- [daisyui](https://affpapa.org/en/nevibecode/skills/daisyui.md) — skill · 12100 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/julianoczkowski-frontend-design.md) — skill · 5500 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

## Other versions with the same name
- [tailwindcss · mengto](https://affpapa.org/en/nevibecode/skills/tailwindcss.md) — 1700 installs
- [tailwindcss · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-tailwindcss.md) — 1500 installs
- [tailwindcss · martinholovsky](https://affpapa.org/en/nevibecode/skills/martinholovsky-tailwindcss.md) — 498 installs

From the same set: [pedronauck/skills](https://affpapa.org/en/nevibecode/by/pedronauck/skills.md) — 6 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