AutoGineer
Generated banner for Tailwindcss
Generated logo for Tailwindcss

Tailwindcss

Meng ToCommunityCreated by Meng To

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides guidance on using Tailwind CSS for UI development, covering layout, typography, responsive design, and theming. It focuses on utility-first styling, component composition, and best practices for maintaining consistent design patterns within web projects.

What it does

  • Provides recipes for common UI elements like buttons and hero sections.
  • Explains how to use responsive and state-based variants.
  • Offers guidance on managing dynamic class names and avoiding common styling pitfalls.
  • Outlines strategies for component extraction and organization.
  • Details how to implement dark mode and arbitrary values.

When to use it

  • When building UI components using a utility-first approach.
  • When you need to implement consistent spacing and typography scales.
  • When working on component-driven applications or prototypes.
  • When you need to resolve issues with class generation or conflicting styles.

Advantages

  • Promotes consistent design through utility composition.
  • Reduces the need for custom CSS files by using standard utility classes.
  • Provides clear patterns for handling responsive and interactive states.
  • Encourages clean code through component-based structure.

Usage examples

“Create a responsive hero section using Tailwind CSS.”
The agent generates a grid-based layout with responsive column adjustments and typography settings.
“How should I handle dynamic button colors in Tailwind?”
The agent provides a mapping pattern to safely select background color classes based on a variable.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/mengto/tailwindcss/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip tailwindcss.zip -d .agents/skills

Documentation by Meng To

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?

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Meng To
Publisher
Meng To (Community)
Source
MengTo/Skills · agent-skills/web-design/tailwindcss · commit 5ea1661
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Meng To or Meng To.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download tailwindcss.zip