Menu
Tailwind CSS mastery. Configuration, custom plugins, responsive design, dark mode, performance, CVA.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/arbazkhan971/godmode --skill tailwindThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | tailwind |
| description | Tailwind CSS mastery. Configuration, custom plugins, responsive design, dark mode, performance, CVA. |
/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