shipshitdev/tailwind-validator
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/weekly-review
development
VerifiedTrustedCommunity
Coordinates a weekly engineering review of board accuracy, recent code changes, operational health, and scoped cleanup. Use for a recurring repository health review or a review of the last several days.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/project-board
testing
VerifiedTrustedCommunity
Audits project board configuration and prepares explicitly requested setup, copy, or normalization changes while preserving the existing workflow and provider boundaries. Use when inspecting a board's fields, columns, scope, or configuration.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/board-sync
testing
VerifiedTrustedCommunity
Reconciles a project board with current work and delivery evidence, reports incomplete coverage and metadata gaps, and applies only approved provider-supported field changes. Use when auditing board drift, reviewing blocked work, or assessing upcoming delivery.
35SKILL.mdUpdated Sep 6, 2026
shipshitdev/how
development
VerifiedTrustedCommunity
Walk through how a subsystem works. Use for "how does X work", code walkthroughs before changing something, and placement or ownership questions. Explains architecture, runtime flow, and onboarding mental models. Can critique architecture. Use why for motivation.
35SKILL.mdUpdated Aug 31, 2026