tailwind-validator

Validate Tailwind CSS v4 configuration and detect deprecated v3 patterns in projects.

Updated Sep 5, 2026
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill tailwind-validator-pohlai88
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tailwind-validator
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/tailwind-validator
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill tailwind-validator-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Migrating to Tailwind CSS v4 introduces breaking changes, and outdated v3 patterns like tailwind.config.js files, @tailwind directives, and autoprefixer plugins often slip into codebases unnoticed, causing build errors and inconsistent styling. ## Core Features & Use Cases - Configuration Validation: Checks package.json for Tailwind v4+, scans CSS files for @import "tailwindcss" and @theme blocks, and flags deprecated v3 config files and PostCSS setups. - Migration Guidance: Provides step-by-step v3-to-v4 migration instructions, including converting theme.extend values into @theme CSS variables and shadcn/ui token setup. - CI/CD Integration: Supports --strict, --ci, and --json flags so validation can run in pipelines to prevent v3 regressions. - Use Case: After an AI assistant generates Tailwind code, run the validator to confirm no @tailwind directives or tailwind.config.js files were introduced before committing. ## Quick Start Ask the AI to validate the current project's Tailwind setup using the tailwind-validator skill and report any v3 patterns that need migration.

Frequently Asked Questions about tailwind-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate a Tailwind CSS v4 configuration?

Run the validate.py script with python3 scripts/validate.py --root . to scan package.json, PostCSS configs, and CSS files. It reports errors for v3 patterns and confirms v4 features like @import "tailwindcss" and @theme blocks.

How to migrate from Tailwind v3 to v4?

Replace tailwindcss and autoprefixer with tailwindcss@latest and @tailwindcss/postcss, convert tailwind.config.js theme values into an @theme CSS block, swap @tailwind directives for @import "tailwindcss", and delete the old config files.

Does Tailwind v4 still use tailwind.config.js?

No, Tailwind v4 uses CSS-first configuration and deprecates tailwind.config.js, .ts, .mjs, and .cjs files. All theme customization moves into @theme blocks with CSS variables like --color-primary and --font-sans.

Can I use Tailwind v4 with shadcn/ui?

Yes, shadcn/ui v2+ supports Tailwind v4. After running the shadcn CLI, verify components.json uses CSS variables and that your @theme block includes the shadcn color tokens such as --color-background and --color-primary.

Why does the validator flag autoprefixer in my PostCSS config?

Autoprefixer is built into the @tailwindcss/postcss plugin in v4, so listing it separately is redundant. Remove autoprefixer from your PostCSS plugins and keep only @tailwindcss/postcss.

How do I run Tailwind validation in a CI pipeline?

Run python3 scripts/validate.py --root . --strict --ci in your workflow. The --ci flag exits with a non-zero code on errors, and --strict also treats warnings as failures, blocking v3 regressions.