Tailwind CSS mastery. Configuration, custom plugins, responsive design, dark mode, performance, CVA.
From godmodenpx claudepluginhub arbazkhan971/godmodeThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
/godmode:tailwind, "set up Tailwind", "Tailwind config"# Detect Tailwind version and config
grep "tailwindcss" package.json 2>/dev/null
ls tailwind.config.* postcss.config.* 2>/dev/null
# Check for CSS conflicts
grep -E "styled-components|@emotion|sass|less" \
package.json 2>/dev/null
TAILWIND ASSESSMENT:
Version: <3.x / 4.x>
Framework: <React | Vue | Svelte | Angular>
Build tool: <Vite | Webpack | PostCSS CLI>
Component library: <shadcn | DaisyUI | custom | none>
Dark mode: <class | media | none>
Quality: HIGH | MEDIUM | LOW
Tailwind 4.x: CSS-first via @theme {} in app.css
with @import "tailwindcss". Define tokens as
CSS custom properties (oklch colors).
Tailwind 3.x: JS config via tailwind.config.ts
with satisfies Config. Use theme.extend.
Rules:
addComponents: multi-property (.btn, .card, .badge)
addUtilities: single-purpose (.text-balance)
addBase: element defaults (typography reset)
addVariant: state variants (hocus:, aria-selected:)
Reference theme values: theme('colors.brand.500')
BREAKPOINTS:
default: 0px (mobile)
sm: 640px, md: 768px, lg: 1024px
xl: 1280px, 2xl: 1536px
Mobile-first always.
IF reusable component: container queries over media
IF layout: max-w-* + flex-1, avoid fixed widths
IF typography: clamp() via arbitrary values
CLASS STRATEGY (recommended): toggle via html class
IF user toggle needed: class strategy
IF system-only: media strategy
IF multiple themes: CSS custom properties
SEMANTIC TOKENS:
:root { --color-bg: white; --color-text: black; }
.dark { --color-bg: #0a0a0a; --color-text: #fafafa; }
Components use var(--color-bg) -- no dark: prefix.
PREVENT FLASH: inline script in <head> reads
localStorage before render. Always support 3 modes:
light, dark, system.
JIT default in 3+/4 (generates only used classes).
Content paths must cover ALL template files.
Missing path = missing utilities in production.
NEVER construct classes dynamically.
bg-${color}-500 will NOT be included.
Use complete strings or object maps instead.
Minimize safelist (always in bundle).
Minimize @apply (defeats utility-first).
Target: <50KB gzipped CSS bundle.
CVA (Class Variance Authority):
Organize variants (size, color, state) cleanly.
cn() utility: twMerge(clsx(inputs))
Resolves conflicts, handles conditionals.
EXTRACT to component when:
Same classes appear 3+ times
Class list > 10 utilities
Dark mode doubles class count
DO NOT extract one-off layouts or 3-4 utility combos.
| Check | Status |
|------------------------------|--------|
| Content paths cover all files| PASS |
| Theme extends (not overrides)| PASS |
| Dark mode configured | PASS |
| No dynamic class construction| PASS |
| Minimal safelist + @apply | PASS |
| CVA/cn() for variants | PASS |
| Mobile-first responsive | PASS |
| CSS bundle <50KB gzipped | PASS |
| Focus-visible rings | PASS |
VERDICT: PASS | NEEDS REVISION
grep "tailwindcss" package.json 2>/dev/null
ls tailwind.config.* postcss.config.* 2>/dev/null
Append to .godmode/tailwind-results.tsv:
timestamp\taction\tfiles\tcomponents\tbuild\tcss_kb\tissues
TAILWIND: {action}. Files: {N}. Tokens: {N}.
CSS: {N}KB gzipped. Build: {status}. Issues: {N}.
KEEP if: build passes AND no visual regressions
AND CSS size stable or decreased
DISCARD if: build fails OR classes missing
OR CSS size increased >20%. Revert.
STOP when ALL of:
- Build passes, no CSS warnings
- All components use design tokens
- CSS bundle within budget (<50KB gzipped)
- No arbitrary values in markup