shipshitdev/tailwind-validator
bundles/frontend/skills/tailwind-validator/SKILL.md
Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
$ install --global
skillsauthnpx skillsauth add shipshitdev/library tailwind-validatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 14, 2026, 4:47 AM170.1s4 files scanned
SKILL.md
- name:
- tailwind-validator
- description:
- Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
- version:
- 1.0.1
- tags:
- tailwind, css, validation, frontend, configuration
Tailwind 4 Validator
Purpose
Ensures:
- Projects use Tailwind v4 CSS-first configuration
- Old
tailwind.config.jspatterns are detected and flagged - Proper
@themeblocks are used instead of JS config - Dependencies are v4+
When to Use
- Before any Tailwind work: Run validation first
- New project setup: Ensure v4 is installed correctly
- After AI generates Tailwind code: Verify no v3 patterns snuck in
- Auditing existing projects: Check for migration needs
- CI/CD pipelines: Prevent v3 regressions
Quick Start
python3 scripts/validate.py --root .
python3 scripts/validate.py --root . --suggest-fixes
python3 scripts/validate.py --root . --strict
What Gets Checked
| Check | Good (v4) | Bad (v3) |
|---|---|---|
| Package version | "tailwindcss": "^4.0.0" | "^3.4.0" |
| CSS config | @import "tailwindcss"; + @theme { --color-primary: ...; } | @tailwind base/components/utilities; |
| Config files | none - config lives in CSS | tailwind.config.{js,ts,mjs,cjs} (deprecated in v4) |
| PostCSS | plugins: { '@tailwindcss/postcss': {} } only | tailwindcss + autoprefixer as separate plugins |
| Imports | @import "tailwindcss/preflight" / .../utilities | @tailwind directives |
See references/full-guide.md (§ What Gets Checked, § Validation Output) for full GOOD/BAD examples and a sample validation report.
Migration Guide (v3 to v4)
- Swap packages: remove
tailwindcss/autoprefixer, addtailwindcss@latest+@tailwindcss/postcss - Point
postcss.config.jsat the@tailwindcss/postcssplugin only - Convert
tailwind.config.jstheme/extend values into an@theme { --color-*, --font-*, ... }block in CSS - Replace
@tailwinddirectives with@import "tailwindcss" - Delete
tailwind.config.{js,ts,mjs,cjs}
See references/full-guide.md (§ Migration Guide, § CI/CD Integration) for the exact before/after code per step and a CI workflow snippet.
Common v3 Patterns to Avoid
| 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" |
See references/full-guide.md (§ v4 @theme Reference, § Using with shadcn/ui) for a full @theme token example and shadcn/ui token setup.
Troubleshooting
- "Found tailwind.config.js but using v4" - some tools still generate v3 configs. Delete the file and use
@themeinstead. - "@tailwind directives found" - replace with
@import "tailwindcss". The old directives are not supported in v4. - "autoprefixer in postcss.config" - remove autoprefixer; it's built into
@tailwindcss/postcss. - "content array in config" - v4 auto-detects content files. Remove the
contentconfig entirely.
Related Skills
shipshitdev/typescript-refactor
development
VerifiedTrustedCommunity
TypeScript refactoring and modernization guidelines from a principal specialist perspective. This skill should be used when refactoring, reviewing, or modernizing TypeScript code to ensure type safety, compiler performance, and idiomatic patterns. Triggers on tasks involving TypeScript type architecture, narrowing, generics, error handling, or migration to modern TypeScript features.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/typescript-expert
tools
VerifiedTrustedCommunity
Resolves TypeScript and JavaScript problems across type-level programming, performance, monorepo management, migration, and modern tooling. Invoke when diagnosing "type instantiation excessively deep" errors, migrating JS to TS, configuring strict tsconfig, debugging module resolution, or choosing between Biome/ESLint/Turborepo/Nx.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/turborepo
tools
VerifiedTrustedCommunity
Turborepo monorepo build system guidance. Triggers on: `turbo.json`, task pipelines, `dependsOn`, caching, remote cache, the `turbo` CLI, `--filter`, `--affected`, CI optimization, environment variables, internal packages, monorepo structure, and package boundaries. Use when the user configures tasks or workflows, creates packages, sets up a monorepo, shares code between apps, runs changed packages, debugs cache behavior, or works in an `apps/` plus `packages/` workspace.
30SKILL.mdUpdated Jul 14, 2026
shipshitdev/tailwind
tools
VerifiedTrustedCommunity
Provides Tailwind CSS v4 performance optimization and best practices guidelines. Triggers when writing, reviewing, or refactoring Tailwind CSS v4 code; when working with Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.
30SKILL.mdUpdated Jul 14, 2026