Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
.claude/skills/giuseppe-trisciuoglio-tailwind-css-patterns/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-08 | ✗→✓ | ▲ Improved | 39% | 0% |
| case-15 | ✗→✓ | ▲ Improved | 12% | 0% |
| case-01 | ✓→✓ | ＝ Same ✓ | 58% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 67% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 78% | 0% |
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
| Prefix | Min Width | Description | |--------|-----------|-------------| | sm: | 640px | Small screens | | md: | 768px | Tablets | | lg: | 1024px | Desktops | | xl: | 1280px | Large screens | | 2xl: | 1536px | Extra large |
html<!-- Center content --> <div class="flex items-center justify-center min-h-screen"> Content </div> <!-- Responsive grid --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <!-- Items --> </div> <!-- Card component --> <div class="bg-white rounded-lg shadow-lg p-6"> <h3 class="text-xl font-bold">Title</h3> <p class="text-gray-600">Description</p> </div>
sm:, md:, lg:) for larger screenstailwind.config.js or using @themetsxfunction ProductCard({ product }: { product: Product }) { return ( <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex"> <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} /> <div className="p-6"> <h3 className="text-lg font-semibold">{product.name}</h3> <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> Add to Cart </button> </div> </div> ); }
html<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> <h1 class="dark:text-white">Title</h1> </div>
html<input class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@example.com" />
@apply for maintainabilitycontent: [] in confignpm run build to regenerate purged CSSnpx tailwindcss -o with --watch flag for live updatesmd:flex not flex md:flex)darkMode: 'class' or 'media' is set correctlydocument.documentElement.classList.toggle('dark') for class strategydark class to <html> before body renders@apply with complex selectorsclass or media strategy)| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | pass→pass | 17,237 | 18,458 | +7% | 1 | 1 | 0% | 3,582 | 5,658 | +58% | 0 | 0 | — |
case-02 | pass→pass | 10,182 | 8,130 | -20% | 1 | 1 | 0% | 1,802 | 3,011 | +67% | 0 | 0 | — |
case-03 | pass→pass | 13,345 | 12,876 | -4% | 1 | 1 | 0% | 2,002 | 3,556 | +78% | 0 | 0 | — |
case-04 | pass→pass | 11,912 | 11,193 | -6% | 1 | 1 | 0% | 2,021 | 3,730 | +85% | 0 | 0 | — |
case-05 | pass→pass | 13,062 | 10,800 | -17% | 1 | 1 | 0% | 2,111 | 3,206 | +52% | 0 | 0 | — |
case-06 | pass→pass | 7,894 | 6,237 | -21% | 1 | 1 | 0% | 1,296 | 2,491 | +92% | 0 | 0 | — |
case-07 | pass→pass | 8,052 | 7,217 | -10% | 1 | 1 | 0% | 1,789 | 3,060 | +71% | 0 | 0 | — |
case-08 | fail→pass | 8,784 | 5,438 | -38% | 1 | 1 | 0% | 1,828 | 2,537 | +39% | 0 | 0 | — |
case-09 | pass→pass | 3,871 | 3,842 | -1% | 1 | 1 | 0% | 648 | 2,107 | +225% | 0 | 0 | — |
case-10 | pass→pass | 4,130 | 4,806 | +16% | 1 | 1 | 0% | 663 | 2,301 | +247% | 0 | 0 | — |
case-11 | pass→pass | 8,137 | 6,064 | -25% | 1 | 1 | 0% | 1,281 | 2,550 | +99% | 0 | 0 | — |
case-12 | pass→pass | 7,324 | 6,218 | -15% | 1 | 1 | 0% | 1,313 | 2,721 | +107% | 0 | 0 | — |
case-13 | pass→pass | 12,817 | 11,056 | -14% | 1 | 1 | 0% | 2,247 | 3,500 | +56% | 0 | 0 | — |
case-14 | pass→pass | 10,973 | 11,284 | +3% | 1 | 1 | 0% | 2,266 | 3,026 | +34% | 0 | 0 | — |
case-15 | fail→pass | 12,815 | 8,022 | -37% | 1 | 1 | 0% | 2,698 | 3,022 | +12% | 0 | 0 | — |
case-16 | pass→pass | 5,645 | 4,293 | -24% | 1 | 1 | 0% | 886 | 2,265 | +156% | 0 | 0 | — |
case-17 | pass→pass | 9,067 | 4,410 | -51% | 1 | 1 | 0% | 1,531 | 2,167 | +42% | 0 | 0 | — |
case-18 | pass→pass | 6,492 | 5,146 | -21% | 1 | 1 | 0% | 1,061 | 2,282 | +115% | 0 | 0 | — |
case-19 | pass→pass | 6,275 | 4,336 | -31% | 1 | 1 | 0% | 1,076 | 2,292 | +113% | 0 | 0 | — |
case-20 | pass→pass | 3,981 | 3,579 | -10% | 1 | 1 | 0% | 580 | 1,938 | +234% | 0 | 0 | — |
case-21 | pass→pass | 11,547 | 7,019 | -39% | 1 | 1 | 0% | 2,028 | 2,700 | +33% | 0 | 0 | — |
case-22 | pass→pass | 11,892 | 9,140 | -23% | 1 | 1 | 0% | 2,155 | 3,152 | +46% | 0 | 0 | — |
case-23 | pass→pass | 14,298 | 14,581 | +2% | 1 | 1 | 0% | 2,691 | 4,179 | +55% | 0 | 0 | — |
case-24 | pass→pass | 17,033 | 16,595 | -3% | 1 | 1 | 0% | 2,882 | 4,334 | +50% | 0 | 0 | — |
case-25 | pass→pass | 16,922 | 45,164 | +167% | 1 | 1 | 0% | 2,744 | 3,966 | +45% | 0 | 0 | — |
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. 25 cases were attempted. The headline lift of +8 percentage points is the difference between those two pass rates over the 25 comparable cases.
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.
Other measured skills in the registry, with their headline benchmark lift.