tailwindcss

Name: tailwindcss
Author: compozy/agh

$npx mdskill add compozy/agh/tailwindcss

Style components with Tailwind CSS v4 semantic tokens and utilities.

Ensures theme-safe styling using semantic design tokens instead of literal colors.
Relies on Read, Grep, and Glob tools to inspect existing code.
Prefers v4 utilities and mobile-first responsive patterns over v3 idioms.
Outputs className strings or arrays for cn()/clsx() with tailwind-merge.

SKILL.md

.github/skills/tailwindcssView on GitHub ↗

---
name: tailwindcss
description: Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
allowed-tools: Read, Grep, Glob
metadata:
  author: Pedro Nauck
  github: https://github.com/pedronauck
  repository: https://github.com/pedronauck/skills
---

# Tailwind CSS v4

Style with utility classes only, and prefer v4 utilities over v3 idioms and hand-written CSS.

## Design tokens (theme-safe)

Every color, background, and border class uses a semantic token so theme and dark-mode switching stays automatic. Reach for a token, never a literal like `bg-white` or `bg-blue-500`:

- Backgrounds — `bg-background`, `bg-card`, `bg-muted`, `bg-popover`
- Text — `text-foreground`, `text-muted-foreground`, `text-card-foreground`
- Borders — `border-border`, `border-input`, `border-ring`
- Actions — `bg-primary text-primary-foreground`, `bg-secondary text-secondary-foreground`
- States — `bg-destructive text-destructive-foreground`, `bg-accent text-accent-foreground`
- Shades — tune with the opacity modifier (`bg-primary/90`), not a new color.

## Class conventions

- Break class strings over 100 characters into a logical array joined into `cn()`/`clsx()`.
- Compose conflicting classes through `tailwind-merge` so the last value wins.
- Use complete, static class names — a lookup map for variants, never an interpolated `bg-${color}-500`.
- Extract shared styles by composing utilities; reserve `@apply` for element defaults in `@layer base`.
- Resolve specificity through class order and merging, not `!important`.

## Reach for v4

Default to v4 utilities: `size-10` over `w-10 h-10`, `h-dvh`/`h-svh` for viewport height, `@container` queries, `bg-(--var)` for CSS variables, `text-shadow-*`, `text-balance`/`text-pretty`. Build layouts mobile-first, adding `sm:`/`md:`/`lg:` for larger screens.

## Before finishing

- Colors, backgrounds, and borders all use semantic tokens.
- Long class strings broken into arrays; class names static; `@apply` only in the base layer; no `!important`.
- `focus-visible:` used for keyboard focus rings.
- `pnpm run lint` and `pnpm run typecheck` pass.

For copy-ready examples and the full utility/variant catalog — extended v4 utilities, focus/peer/group/ARIA variants, dark mode, and anti-pattern examples — see [references/patterns.md](references/patterns.md); when a utility or variant you need is not listed above, read it before choosing classes.

More from compozy/agh

Skill	Description
agent-exploration	>-
agh	AGH runtime and contribution guide. Use for sessions, agents, native tools, skills, memory, network, tasks, capabilities, bundles, QA, docs, and repo work. Do not use for unrelated projects.
agh-cleanup-failure-paths	>-
agh-code-guidelines	>-
agh-contract-codegen-coship	Contract co-ship for AGH wire changes. Use when editing public DTOs, OpenAPI, JSON-RPC extension shapes, generated clients, or handler request/response semantics. Do not use for internal Go refactors or test-only changes that leave the wire contract unchanged.
agh-data-boundaries	Data-boundary audit for AGH route loaders, TanStack Query caches, paginated catalogs, filters, ordering, totals, live streams, workspace-scoped reads, and their backend APIs. Use when adding, changing, or debugging those paths. Don't use for presentational-only UI or backend work with no public read-model impact.
agh-design	AGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.
agh-qa-bootstrap	Bootstraps isolated AGH QA labs and emits the canonical manifest for downstream QA. Use when local QA needs daemon, workspace, provider, or playbook setup. Do not use for unit tests, planning-only work, or browser-only checks.
agh-schema-migration	Authors append-only Goose SQL migrations for AGH SQLite streams and keeps declarative schema sources, atlas.sum, Atlas checks, sqlc output, and migration tests synchronized. Use for SQLite table, column, index, constraint, trigger, or seed-data changes under internal/store or internal/memory. Do not use for in-memory structures, derived Markdown memory, or non-SQLite caches.
agh-test-conventions	>-