Tailwind CSS Agent Skill
Utility-first Tailwind CSS with cn() helper, responsive, dark mode.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Utility-first Tailwind CSS with cn() helper, responsive, dark mode.
homepage: https://yepapi.com/skills/tailwind
metadata:
tags: [tailwind, css, styling, responsive]
---
# Tailwind CSS
## Rules
- Utility-first — compose from utilities, extract components only when patterns repeat 3+ times
- Use `cn()` helper (clsx + tailwind-merge) for conditional classes: `cn("base", condition && "active")`
- Responsive: mobile-first with `sm:`, `md:`, `lg:` breakpoints
- Dark mode: `dark:` variant with system preference or class toggle
- Custom design tokens in `tailwind.config.ts` — don't use arbitrary values repeatedly
- Semantic color names in config: `primary`, `secondary`, `destructive` — not raw hex
- No inline styles — if Tailwind can't do it, extend the config
- Group related utilities: layout → spacing → typography → colors → effects
- Use `@apply` sparingly — only in CSS files for base styles, never in components
## Avoid
- Inline `style={{ }}` alongside Tailwind classes
- `!important` via `!` prefix — fix specificity instead
- Arbitrary values `[47px]` repeatedly — add to config
- String concatenation for classes — use `cn()` helper
- `@apply` in component files — defeats the purpose of utility-firstInstall
Why Use the Tailwind CSS Skill?
Without this skill, your AI guesses at tailwind css patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Tailwind CSS skill installed. Your AI knows the context and writes code that fits.
"Set up Tailwind CSS with a custom design system, cn() helper, and responsive utilities"
"Create a component library with Tailwind using consistent spacing, colors, and dark mode"
"Build responsive layouts with Tailwind that handle mobile, tablet, and desktop breakpoints"
Works Great With
Tailwind CSS skill — FAQ
It provides utility-first Tailwind CSS patterns with the cn() helper, responsive design, and dark mode. Your AI generates clean Tailwind markup with consistent spacing and no redundant classes.
Run `npx skills add YepAPI/skills --skill tailwind` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
The skill covers Tailwind CSS patterns that work with both v3 and v4. It uses the cn() helper for conditional classes, responsive prefixes, and dark mode variants.