Tailwindcss

Skill nota-america/forgecat-agent-profiles/profiles/mengto/skills/mango_skills_agent-skills-web-design/for-forgecat/skills/tailwindcss

Production-ready AI agent profiles for Claude Code, Cursor, and Codex. Search, install, and contribute ForgeCat packages.

Install

npx -y skills add nota-america/forgecat-agent-profiles --skill tailwindcss

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

24 stars24 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.

SKILL.md

2.8 KB, as published. Nobody here has run it

Tailwind CSS — Utility-first Styling Skill

When to use

Rapid UI building with consistent spacing/typography scales
Design systems where composition beats bespoke CSS
Component-driven apps (React/Vue/Svelte), marketing pages, prototypes → production

Key concepts & patterns

Utilities compose in HTML/JSX: class="flex gap-4 p-6 bg-zinc-950 text-white"
Responsive variants: sm: md: lg: xl: etc.
State variants: hover:, focus:, active:, disabled:, group-hover:, peer-checked:
Arbitrary values (use sparingly): w-[42rem], bg-[#0b1220], translate-y-[3px]
Dark mode patterns: dark: with class-based strategy
Extracting repeated patterns:
- Prefer components (JSX/Vue components) first
- Then @apply for small reusable patterns (avoid overuse)
Build pipeline:
- Tailwind scans “content” files for class names and generates CSS (zero-runtime)

Common pitfalls

Classes not generated in production
- Ensure content paths include all templates/components.
- Avoid building class names dynamically (e.g. "text-" + color) unless safelisted.
Overusing @apply and losing the utility-first benefits
Conflicting styles due to class order assumptions
Huge HTML class lists with no structure
- Use component composition; break into subcomponents; use clsx/cva when needed.

Quick recipes

1) A clean CTA button

<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
               bg-indigo-600 text-white font-medium
               hover:bg-indigo-500 active:bg-indigo-700
               focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
  Get started
</button>

2) Responsive hero layout

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-2 lg:items-center">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship a beautiful site fast.
      </h1>
      <p class="mt-4 text-zinc-600">
        Tailwind helps you move quickly without fighting CSS.
      </p>
    </div>
    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      <!-- media -->
    </div>
  </div>
</section>

3) Handling dynamic classnames safely

Prefer mapping:

const toneClass = {
  success: "bg-emerald-600",
  danger: "bg-rose-600",
  info: "bg-sky-600",
}[tone];

What to ask the user

Framework/build tool (Next/Vite/Remix/Webflow export)?
Do we need a design system (tokens, component library) or a one-off page?
Dark mode? RTL? accessibility constraints?