From shipshitdev-library
Validates Tailwind CSS v4 configuration, detects v3 patterns like old directives and config files, and ensures CSS-first @theme blocks. Use for setups, audits, migrations, or AI code reviews.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
Validates that a project uses Tailwind CSS v4 with proper CSS-first configuration. Detects and flags Tailwind v3 patterns that should be migrated.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Validates that a project uses Tailwind CSS v4 with proper CSS-first configuration. Detects and flags Tailwind v3 patterns that should be migrated.
CRITICAL: Claude and other AI assistants often default to Tailwind v3 patterns. This skill ensures:
tailwind.config.js patterns are detected and flagged@theme blocks are used instead of JS config# Validate current project
python3 scripts/validate.py --root .
# Validate with auto-fix suggestions
python3 scripts/validate.py --root . --suggest-fixes
# Strict mode (fail on any v3 pattern)
python3 scripts/validate.py --root . --strict
// GOOD: v4+
"tailwindcss": "^4.0.0"
// BAD: v3
"tailwindcss": "^3.4.0"
GOOD - Tailwind v4:
/* app.css or globals.css */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #64748b;
--font-sans: "Inter", sans-serif;
--breakpoint-3xl: 1920px;
}
BAD - Tailwind v3:
/* Old v3 directives */
@tailwind base;
@tailwind components;
@tailwind utilities;
BAD - Should not exist in v4:
tailwind.config.jstailwind.config.tstailwind.config.mjstailwind.config.cjsNote: These files are deprecated in v4. All configuration should be in CSS using @theme.
GOOD - v4:
// postcss.config.js (minimal or not needed)
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
BAD - v3:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
GOOD:
@import "tailwindcss";
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
BAD:
@tailwind base;
@tailwind components;
@tailwind utilities;
=== Tailwind 4 Validation Report ===
Package Version: tailwindcss@4.0.14 ✓
CSS Configuration:
✓ Found @import "tailwindcss" in src/app/globals.css
✓ Found @theme block with 12 custom properties
✗ Found @tailwind directive in src/styles/legacy.css (line 3)
Config Files:
✗ Found tailwind.config.ts - should migrate to CSS @theme
PostCSS:
✓ Using @tailwindcss/postcss plugin
Summary: 2 issues found
- Migrate tailwind.config.ts to @theme in CSS
- Remove @tailwind directives from src/styles/legacy.css
bun remove tailwindcss autoprefixer
bun add tailwindcss@latest @tailwindcss/postcss
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
Before (v3):
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
};
After (v4):
/* globals.css */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #64748b;
--font-sans: "Inter", sans-serif;
}
Before:
@tailwind base;
@tailwind components;
@tailwind utilities;
After:
@import "tailwindcss";
rm tailwind.config.js tailwind.config.ts
| v3 Pattern | v4 Replacement |
|---|---|
@tailwind base | @import "tailwindcss" |
@tailwind utilities | @import "tailwindcss/utilities" |
tailwind.config.js | @theme block in CSS |
theme.extend.colors | --color-* CSS variables |
theme.extend.spacing | --spacing-* CSS variables |
theme.extend.fontFamily | --font-* CSS variables |
content: ['./src/**/*.tsx'] | Not needed (auto-detected) |
plugins: [require('@tailwindcss/forms')] | @plugin "@tailwindcss/forms" |
@import "tailwindcss";
@theme {
/* Colors */
--color-primary: #3b82f6;
--color-primary-50: #eff6ff;
--color-primary-900: #1e3a8a;
/* Typography */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* Spacing (extends default scale) */
--spacing-128: 32rem;
/* Breakpoints */
--breakpoint-3xl: 1920px;
/* Animations */
--animate-fade-in: fade-in 0.3s ease-out;
/* Shadows */
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.5);
/* Border radius */
--radius-4xl: 2rem;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
shadcn/ui v2+ supports Tailwind v4. After running the shadcn CLI:
components.json uses CSS variables@theme includes shadcn color tokens:@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(222.2 84% 4.9%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(222.2 84% 4.9%);
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(222.2 84% 4.9%);
--color-primary: hsl(222.2 47.4% 11.2%);
--color-primary-foreground: hsl(210 40% 98%);
--color-secondary: hsl(210 40% 96.1%);
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
--color-muted: hsl(210 40% 96.1%);
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
--color-accent: hsl(210 40% 96.1%);
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(210 40% 98%);
--color-border: hsl(214.3 31.8% 91.4%);
--color-input: hsl(214.3 31.8% 91.4%);
--color-ring: hsl(222.2 84% 4.9%);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
}
Add to your CI pipeline:
# .github/workflows/lint.yml
- name: Validate Tailwind v4
run: |
python3 scripts/validate.py \
--root . \
--strict \
--ci
Some tools still generate v3 configs. Delete the file and use @theme instead.
Replace with @import "tailwindcss". The old directives are not supported in v4.
Remove autoprefixer - it's built into @tailwindcss/postcss.
v4 auto-detects content files. Remove the content config entirely.