---
name: tailwind-ui-generator
description: "Generate Tailwind CSS components — cards, modals, navbars, forms, and dashboards. Designs and writes pixel-perfect Tailwind CSS components from a one-line description. Outputs responsive, dark-mode-ready HTML/JSX with proper token usage and accessibility markup."
license: MIT
---

# Tailwind UI Generator

Turn a one-line description into production-ready Tailwind markup. This skill drafts cards, modals, navbars, forms, and full dashboard layouts as responsive, dark-mode-aware HTML or JSX, wired with the right utility classes, focus states, and ARIA attributes. It's aimed at frontend developers and designers who already build in Tailwind and want a solid first pass to refine rather than a black-box page builder.

## When to use it

- You're scaffolding a new screen and want a clean component skeleton before wiring data.
- You need a modal, dropdown, or multi-step form with focus management and keyboard handling already in place.
- You're translating a Figma frame or a rough sketch into Tailwind utilities.
- You want a dashboard shell (sidebar + topbar + content grid) that's responsive from `sm` to `2xl` without hand-tuning every breakpoint.

## What it does

Given a prompt, it emits markup using Tailwind's utility classes and core conventions: responsive prefixes (`sm:`, `md:`, `lg:`), state variants (`hover:`, `focus:`, `focus-visible:`, `disabled:`), and the `dark:` variant for color-scheme support. Spacing, radius, and color are pulled from the default scale (`p-4`, `rounded-lg`, `text-slate-600`) so output maps to your `tailwind.config.js` theme rather than arbitrary values. Interactive pieces include semantic roles and labels (`role="dialog"`, `aria-modal`, `aria-expanded`, `sr-only`). For JSX targets it returns valid React (`className`, self-closing tags, `htmlFor`). It assumes Tailwind v3+ JIT and works alongside `@tailwindcss/forms` when you have it installed.

## Usage

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/tailwind-ui-generator/SKILL.md https://claudeskil.com/skills/tailwind-ui-generator/SKILL.md

# then, in a session:
"Generate a pricing card with a featured badge, JSX, dark mode"
"Make a responsive navbar with a mobile hamburger and a user dropdown"
"Build a settings form: avatar upload, two-column fields, sticky save bar"
```

A pricing-card request returns something like:

```jsx
<div className="rounded-2xl border border-slate-200 p-6 shadow-sm
                dark:border-slate-700 dark:bg-slate-900">
  <span className="inline-flex rounded-full bg-indigo-100 px-3 py-1
                   text-xs font-medium text-indigo-700 dark:bg-indigo-500/10">
    Most popular
  </span>
  {/* ... */}
</div>
```

## Tips & gotchas

- Name your target ("JSX" vs "HTML") and your stack; otherwise it defaults to plain HTML.
- Dark mode output assumes `darkMode: 'class'` in your config — switch the prompt to media-query mode if you use `darkMode: 'media'`.
- Interactive behavior (open/close, focus trap) is structural; the toggle JS is minimal, so pair complex widgets with Headless UI or your own state.
- Custom brand colors only appear if you mention them or your theme tokens; by default it sticks to the stock palette.

## FAQ

**Does it support Tailwind v4?** Output uses standard utilities that work in v3 and v4. If you rely on v4's CSS-first `@theme`, mention it so generated custom values align.

**Can I get just the diff for an existing component?** Yes — paste your current markup and describe the change (e.g. "add a loading state and disable the button").

**Are the components accessible out of the box?** They ship with labels, roles, and focus-visible styles, but always test with a screen reader and keyboard before shipping.