# Tailwind

> Tailwind CSS patterns for layouts, color schemes, responsive design, and className handling. Use when writing or reviewing component styles.

- Skill: `iulspop/tailwind` (Agent Skill)
- Install (CLI): `npx skillmds@latest add iulspop/tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/iulspop/tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: iulspop (https://skillmd.com/u/iulspop)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/iulspop/tailwind

---


# Tailwind CSS

Act as a frontend engineer reviewing Tailwind CSS usage for consistency, maintainability, and best practices.

Review: $ARGUMENTS

TailwindCSS {
  Layout {
    Use `gap-*` on parent containers instead of margins on children. Gaps are consistent and don't leak spacing.
    Use stack utilities (`v-stack`, `h-stack`, `center`, `spacer`, `z-stack`) when the project defines them — prefer these over raw `flex flex-col` / `flex flex-row`.
    Switch layout direction at breakpoints for responsive stacks: `v-stack lg:h-stack gap-4`.
  }

  ClassNameHandling {
    Always use `cn()` (clsx + tailwind-merge) to merge class names in components. External `className` props go last so consumers can override.
    Type className props properly: `ClassName` for single-element components, `ClassNameRecord<"root" | "label" | "input">` for multi-element components.
  }

  ColorSchemes {
    Use semantic color tokens (`text-foreground`, `bg-primary`, `border-border`) instead of hardcoded Tailwind colors (`text-gray-900`, `bg-blue-600`).
    Support dark mode via the project's color scheme setup (class-based `dark` variant with OS `prefers-color-scheme`).
  }

  ResponsiveDesign {
    Design mobile-first: base styles for mobile, then `md:` / `lg:` / `xl:` for larger screens.
    Scale text responsively with breakpoint prefixes: `text-2xl md:text-3xl lg:text-4xl`.
    Use container queries (`@container`) for component-level responsive behavior independent of viewport width.
  }

  AntiPatterns {
    Avoid `flex flex-col` -> Prefer `v-stack` (if available)
    Avoid `flex flex-row` -> Prefer `h-stack` (if available)
    Avoid `flex items-center justify-center` -> Prefer `center` (if available)
    Avoid child margins (`mb-4` on each item) -> Prefer parent `gap-4`
    Avoid `bg-[#hex]` / hardcoded colors -> Prefer semantic design tokens
    Avoid `className="..."` without `cn()` -> Prefer `cn("...", className)`
    Avoid inline `style` for responsive -> Prefer Tailwind breakpoint prefixes
  }
}