New to Claude Skills? Learn how to install them →

Get Claude Skills
mengto on GitHub

Tailwind CSS

Free

Streamline your UI design with utility-first CSS.

by mengto4.6k stars on mengto/skills
2 views
Updated Aug 9, 2026
Get this skill

Free · Opens the source repo

What Tailwind CSS does

Tailwind CSS is a utility-first CSS framework that empowers developers to build responsive and visually appealing user interfaces quickly. This skill provides a comprehensive guide for using Tailwind CSS effectively, focusing on key concepts, patterns, and common pitfalls to avoid. By leveraging Tailwind's utility classes, developers can achieve consistent spacing, typography, and layout designs without the need for extensive custom CSS, making it ideal for rapid UI development.

The skill emphasizes the importance of component-driven design, particularly in modern frameworks like React, Vue, and Svelte. It encourages the use of utility classes directly in HTML or JSX, which allows for a more streamlined approach to styling. The documentation includes quick recipes for common UI elements, such as buttons and responsive layouts, enabling developers to implement best practices effortlessly.

Additionally, the skill addresses common challenges faced when using Tailwind CSS, such as ensuring that classes are generated in production builds and maintaining a clean HTML structure. It provides guidance on how to handle dynamic class names safely and offers strategies for implementing dark mode and responsive design patterns. Overall, this skill serves as a valuable resource for developers looking to enhance their UI design process with Tailwind CSS.

When to use it

Use this skill when building user interfaces with Tailwind CSS, particularly in component-driven applications or design systems.

When not to use it

This skill may not be suitable for projects that require extensive custom CSS or for those not using Tailwind CSS as their styling framework.

What you can build with it

Rapid Prototyping

Use Tailwind CSS to quickly prototype user interfaces for marketing pages or applications, ensuring a consistent design language.

Building Design Systems

Implement a design system with Tailwind CSS, utilizing its utility classes to create reusable components that maintain visual consistency.

Responsive Web Design

Leverage Tailwind's responsive utilities to create layouts that adapt seamlessly across different screen sizes.

How to install Tailwind CSS

View source

1. Install with the skills CLI

npx skills add mengto/skills/tailwindcss --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by mengto

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?

Frequently asked questions about Tailwind CSS

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.