tailwindcss

MengTo/Skills · Agent Skill

Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.

Overview

Publisher	MengToCommunity
Repository	MengTo/Skills ↗
Skill folder	`tailwindcss`
Stars	7,038
Forks	819
Bundled files	5
License	MIT
Last updated	October 25, 2026
Links	Skill source ↗ · Repository ↗

Mozgi check

What we found in the skill files. Details come with a subscription.

Security

low risk · no obvious risks found — the full report shows the details

Compatibility

instructions only — works with most agents

Similar skills

62 similar skills found

Also with subscription

Installation

A skill is a folder with a SKILL.md file. Pick your agent and run the commands in a terminal (macOS, Linux or Git Bash on Windows) from your project root.

Copy the prompt into Claude, Codex or another assistant: it will review the skill and install it for you.

Install the “tailwindcss” skill from mozgi.io (https://mozgi.io/skills/mengto-tailwindcss/) for me.

1. Download the archive: https://mozgi.io/skills/mengto-tailwindcss/download
   If it fails, take the skill folder from the source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/tailwindcss
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “tailwindcss” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/tailwindcss/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .claude/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .claude/skills/tailwindcss

Restart Claude Code — the skill appears in the list; call it manually with /tailwindcss. For all projects use ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .agents/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .agents/skills/tailwindcss

Codex looks for skills in .agents/skills from the current folder up to the repo root; call one with /skills or $tailwindcss. For all projects use ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .cursor/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .cursor/skills/tailwindcss

Cursor picks the skill up on start; call it with “/” in Agent chat. Cursor also reads .claude/skills and .agents/skills. For all projects use ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .gemini/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .gemini/skills/tailwindcss

Gemini CLI offers to activate the skill when a task matches — you approve it. For all projects use ~/.gemini/skills.

Review the source files

5 files Download Zip

Read SKILL.md and any companion files before deciding whether to install. Click a file to preview it.

SKILL.md contents

Original author text · read-only

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

What does the tailwindcss skill do?

Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.

How do I install tailwindcss?

Open the “Installation” block on this page and pick your agent — Claude Code, Codex, Cursor or Gemini CLI — for ready-made commands that copy the skill folder to the right place. Or copy the prompt from the “Via assistant” tab and let the assistant review and install the skill.

Which AI models work with tailwindcss?

Skills are plain Markdown instructions (the Agent Skills format), so tailwindcss works with any agent that reads SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and more. The model loads the instructions only when a task matches the skill's description.

Is tailwindcss free?

The skill is published openly by MengTo under the MIT license. The skill itself costs nothing — you only pay your AI provider for the tokens you use.

Is it safe to install skills?

A skill is a set of instructions your agent will follow, so read SKILL.md and its companion files before installing. Scripts in the skill folder only run if your agent runs them — keep an eye on what it does and do not grant unnecessary permissions.

How is a skill different from an MCP server or a plugin?

An MCP server or plugin gives the model new tools — code that runs and returns a result. A skill gives it knowledge and process: how to approach a task, which steps to follow and what good output looks like. It needs no server or API key.

Related skills

All skills →

cobejs Use when building lightweight animated globe or orb visuals with Cobe. MengTo7k

to-prd Turns a conversation into a PRD and publishes it to the issue tracker. mattpocock304k

tdd Red-green-refactor workflow for building features and fixes one slice at a time. mattpocock304k

diagnosing-bugs Systematic bug diagnosis through reproduce, minimize, hypothesize, instrument, and fix. mattpocock304k

domain-modeling Builds and sharpens project domain models and terminology. mattpocock304k

ask-matt Router that picks the right Matt Pocock engineering flow for the current task. mattpocock304k