Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.
.claude/skills/aiskillstore-tailwind-patterns/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-11 | ✗→✓ | ▲ Improved | 16% | 0% |
| case-20 | ✗→✓ | ▲ Improved | -37% | 0% |
| case-07 | ✓→✓ | ＝ Same ✓ | 123% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | -3% | 0% |
| case-06 | ✓→✓ | ＝ Same ✓ | 94% | 0% |
Quick reference for Tailwind CSS utility patterns.
| Prefix | Min Width | |--------|-----------| | sm: | 640px | | md: | 768px | | lg: | 1024px | | xl: | 1280px | | 2xl: | 1536px |
html<div class="w-full md:w-1/2 lg:w-1/3"> <!-- Full on mobile, half on tablet, third on desktop --> </div>
html<!-- Centered container --> <div class="container mx-auto px-4"> <!-- Flexbox row --> <div class="flex items-center justify-between gap-4"> <!-- Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Stack --> <div class="flex flex-col gap-4">
html<div class="bg-white rounded-lg shadow-md p-6"> <h3 class="text-lg font-semibold mb-2">Title</h3> <p class="text-gray-600">Content</p> </div>
html<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> Button </button>
html<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter text">
html<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
js// tailwind.config.js module.exports = { darkMode: 'class' }
| Modifier | Triggers On | |----------|-------------| | hover: | Mouse hover | | focus: | Element focused | | active: | Being clicked | | disabled: | Disabled state | | group-hover: | Parent hovered |
| Class | Size | |-------|------| | p-1 | 4px | | p-2 | 8px | | p-4 | 16px | | p-6 | 24px | | p-8 | 32px |
html<div class="w-[137px] h-[calc(100vh-64px)]">
For detailed patterns, load:
./references/component-patterns.md - Navbar, cards, forms, alerts, loading states| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-07 | pass→pass | 2,564 | 1,480 | -42% | 1 | 1 | 0% | 409 | 914 | +123% | 0 | 0 | — |
case-01 | fail→fail | 6,297 | 5,010 | -20% | 1 | 1 | 0% | 1,145 | 1,686 | +47% | 0 | 0 | — |
case-02 | fail→fail | 8,694 | 3,827 | -56% | 1 | 1 | 0% | 1,569 | 1,394 | -11% | 0 | 0 | — |
case-03 | fail→fail | 9,616 | 7,214 | -25% | 1 | 1 | 0% | 1,825 | 1,886 | +3% | 0 | 0 | — |
case-04 | pass→pass | 10,432 | 5,840 | -44% | 1 | 1 | 0% | 1,777 | 1,718 | -3% | 0 | 0 | — |
case-05 | fail→fail | 8,551 | 4,829 | -44% | 1 | 1 | 0% | 1,523 | 1,520 | -0% | 0 | 0 | — |
case-06 | pass→pass | 3,268 | 1,672 | -49% | 1 | 1 | 0% | 468 | 908 | +94% | 0 | 0 | — |
case-08 | pass→pass | 2,493 | 1,892 | -24% | 1 | 1 | 0% | 401 | 913 | +128% | 0 | 0 | — |
case-09 | pass→pass | 9,510 | 3,695 | -61% | 1 | 1 | 0% | 1,623 | 1,321 | -19% | 0 | 0 | — |
case-10 | pass→pass | 14,791 | 6,642 | -55% | 1 | 1 | 0% | 1,657 | 1,886 | +14% | 0 | 0 | — |
case-11 | fail→pass | 7,080 | 3,717 | -48% | 1 | 1 | 0% | 1,075 | 1,248 | +16% | 0 | 0 | — |
case-12 | pass→pass | 9,693 | 5,236 | -46% | 1 | 1 | 0% | 1,605 | 1,552 | -3% | 0 | 0 | — |
case-13 | pass→pass | 4,070 | 2,086 | -49% | 1 | 1 | 0% | 723 | 1,003 | +39% | 0 | 0 | — |
case-14 | fail→fail | 3,314 | 3,376 | +2% | 1 | 1 | 0% | 437 | 1,153 | +164% | 0 | 0 | — |
case-15 | pass→pass | 4,017 | 2,102 | -48% | 1 | 1 | 0% | 642 | 877 | +37% | 0 | 0 | — |
case-16 | pass→pass | 4,038 | 1,576 | -61% | 1 | 1 | 0% | 562 | 907 | +61% | 0 | 0 | — |
case-17 | pass→pass | 3,602 | 1,372 | -62% | 1 | 1 | 0% | 449 | 857 | +91% | 0 | 0 | — |
case-18 | pass→pass | 4,936 | 3,087 | -37% | 1 | 1 | 0% | 891 | 1,238 | +39% | 0 | 0 | — |
case-19 | pass→pass | 4,573 | 2,393 | -48% | 1 | 1 | 0% | 822 | 1,131 | +38% | 0 | 0 | — |
case-20 | fail→pass | 9,205 | 1,540 | -83% | 1 | 1 | 0% | 1,466 | 924 | -37% | 0 | 0 | — |
case-21 | pass→pass | 5,912 | 4,444 | -25% | 1 | 1 | 0% | 966 | 1,368 | +42% | 0 | 0 | — |
case-22 | pass→pass | 10,594 | 7,851 | -26% | 1 | 1 | 0% | 2,137 | 2,094 | -2% | 0 | 0 | — |
case-23 | pass→pass | 13,760 | 7,938 | -42% | 1 | 1 | 0% | 2,705 | 2,266 | -16% | 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. 23 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 23 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.