Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Tailwind CSS — Utility-first Styling Skill · mengto | DecimalAI

mengto/tailwindcss

SkillScore95Maintained

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

Frontendby mengto

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mengto-tailwindcss/SKILL.md

decimalai skills pull mengto-tailwindcss --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mengto-tailwindcss/SKILL.md https://app.decimal.ai/s/mengto-tailwindcss/SKILL.md

Raw file: /s/mengto-tailwindcss/SKILL.md ↗ · machine-readable summary at /s/mengto-tailwindcss.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 49d ago

Yes — +5% lift+18% tokens0% turns95% of whole cases pass with skill (21/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-09	✗→✓	▲ Improved	-2%	0%
case-03	✓→✓	＝ Same ✓	14%	0%
case-17	✓→✓	＝ Same ✓	-17%	0%
case-18	✓→✓	＝ Same ✓	37%	0%
case-01	✓→✓	＝ Same ✓	13%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mengto / skills

agent-skills/web-design/tailwindcss/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

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

html
<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

html
<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:

js
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?

Illustrative Want to see what mengto/tailwindcss would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/10/2026, 09:30 UTC · 22 cases

Lift

+5%

95% vs 91%

Agent turns

1.0 vs 1.0

Tokens

+18%

1,995.09 vs 1,695.5

fail → pass · 1pass → pass · 20fail → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-03 A React team is migrating a design system to utility classes. Developers are creating a 200-line `styles.css` file filled with `@apply` directives for every UI element. Evaluate this approach and recommend the preferred abstraction method for repeated UI structures.	pass→pass	14,069	11,769	-16%	1	1	0%	2,697	3,074	+14%	0	0	—
case-17 Before starting a new web project styling implementation, what initial setup details should be clarified regarding build environment and accessibility targets?	pass→pass	13,331	6,728	-50%	1	1	0%	2,390	1,986	-17%	0	0	—
case-18 A team is deciding between building bespoke CSS files for every new web page or adopting utility-first composition. In what project scenarios is utility-first styling most effective?	pass→pass	11,450	11,550	+1%	1	1	0%	1,943	2,663	+37%	0	0	—
case-01 Design a primary call-to-action button in React. The team currently uses dynamic string concatenation like `className={'btn-' + variant}` and default browser focus outlines. Show how to implement the interactive button states directly using utility classes.	pass→pass	12,088	9,940	-18%	1	1	0%	2,685	3,028	+13%	0	0	—
case-02 In a notification banner component, developers are dynamically generating background colors using string interpolation: `className={`bg-${status}-600`}`. Explain why this breaks in production builds and provide the correct pattern for handling dynamic alert tones.	pass→pass	11,053	8,260	-25%	1	1	0%	2,277	2,411	+6%	0	0	—
case-04 How should a web app configure and apply dark theme background and text styles across custom card components when theme toggling is controlled by a class on the document element?	pass→pass	13,331	12,392	-7%	1	1	0%	2,899	3,302	+14%	0	0	—
case-05 Create a responsive heading layout where the font size starts at mobile dimensions and scales up on larger viewport widths. A developer suggests using `lg:text-4xl text-2xl` but is confused about mobile-first application order.	pass→pass	8,237	7,810	-5%	1	1	0%	1,632	2,258	+38%	0	0	—
case-06 After deploying a Vite frontend project to production, several utility classes used in new component files under `src/features/` fail to render any CSS styles. What build pipeline configuration mistake causes this behavior?	pass→pass	7,654	6,065	-21%	1	1	0%	1,429	1,844	+29%	0	0	—
case-07 A design specification calls for a fixed sidebar width of exactly 42rem and a custom background color of `#0b1220` that are not part of the standard theme scale. Show how to apply these exact values directly in HTML.	pass→pass	3,652	2,991	-18%	1	1	0%	712	1,263	+77%	0	0	—
case-08 In a card component, an icon inside the card should change color when the user hovers anywhere over the parent container element. How is this state dependency expressed in utility classes?	pass→pass	6,521	3,071	-53%	1	1	0%	1,278	1,343	+5%	0	0	—
case-09 An interactive form element needs to reveal a custom checkbox indicator style when an unseen underlying radio input element is checked. How should the indicator element reference the input's checked state?	fail→pass	9,889	6,372	-36%	1	1	0%	2,071	2,035	-2%	0	0	—
case-10 A design system button component requires managing dozens of conditional class combinations based on size, intent, and disabled state. Writing long template strings is becoming unmaintainable. What library utility combination handles this clean conditional class merging?	pass→pass	11,531	8,646	-25%	1	1	0%	2,263	2,772	+22%	0	0	—
case-11 Construct the outer grid shell for a responsive hero section that stacks vertically on mobile devices and switches to a two-column layout on large viewports with centered item alignment.	pass→pass	6,859	4,386	-36%	1	1	0%	1,480	1,617	+9%	0	0	—
case-12 An engineer asks whether utility CSS frameworks introduce JavaScript runtime overhead for computing dynamic styles in the browser during application execution. Explain how the CSS generation pipeline works.	pass→pass	15,104	10,265	-32%	1	1	0%	2,740	2,483	-9%	0	0	—
case-13 A button needs visual press feedback specifically when the user clicks down on the element. Which variant prefix targets this pointer-down state?	pass→pass	2,417	1,861	-23%	1	1	0%	368	1,084	+195%	0	0	—
case-14 A large hero title needs tighter letter spacing to improve display typography aesthetics. What utility class handles tight letter spacing?	pass→pass	3,746	2,442	-35%	1	1	0%	680	1,187	+75%	0	0	—
case-15 When generating HTML dynamically on a backend server where static content scanning cannot parse templates, how can specific dynamic utility class names be preserved from being purged during the build process?	pass→pass	13,091	7,478	-43%	1	1	0%	2,508	2,129	-15%	0	0	—
case-16 How do you construct a centered content container bounded at a maximum width of 72rem (6xl) with horizontal padding on mobile devices?	pass→pass	8,480	3,597	-58%	1	1	0%	1,717	1,478	-14%	0	0	—
case-19 An element requires a precise vertical translation shift of exactly 3 pixels upward on hover. How is this arbitrary transform represented without writing custom CSS rules?	pass→pass	4,298	3,569	-17%	1	1	0%	751	1,326	+77%	0	0	—
case-20 In standard CSS Grid layout specs, write a CSS rule using `grid-template-columns` that automatically places as many tracks as fit with a minimum column width of 250px and maximum of 1fr.	fail→fail	4,081	2,962	-27%	1	1	0%	840	1,400	+67%	0	0	—
case-21 In native CSS, how do you specify a fallback value of `#1e293b` within the `var()` function when referencing a CSS custom property named `--brand-primary`?	pass→pass	2,039	1,945	-5%	1	1	0%	358	1,090	+204%	0	0	—
case-22 According to the W3C CSS Nesting Module standard, how are nested hover pseudo-class selectors written inside a parent `.card` CSS rule in native CSS?	pass→pass	7,743	7,016	-9%	1	1	0%	1,583	2,119	+34%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 90.9%
Pass rate with the skill: 95.5%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/10/2026, 09:30 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-09

Prompt

An interactive form element needs to reveal a custom checkbox indicator style when an unseen underlying radio input element is checked. How should the indicator element reference the input's checked state?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run95

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+18% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 48 days ago

Other measured skills in the registry, with their headline benchmark lift.