mcpField
T
tailwind-validator

tailwind-validator

github.com/shipshitdev测试与质量38183 次安装2 天前更新
代码仓库

关于 tailwind-validator

用于检查项目是否遵循 Tailwind CSS v4 规范的验证技能。它可识别 v3 配置模式，并支持执行验证、建议修复和严格检查。

主要功能

  1. 01检查 Tailwind CSS 依赖版本
  2. 02检测旧版 JavaScript 配置文件
  3. 03验证 CSS 优先的 @theme 配置
  4. 04检查 PostCSS 插件设置
  5. 05建议修复并执行严格检查

适用场景

  1. 01验证新 Tailwind 项目配置
  2. 02升级到 v4 前审查项目
  3. 03检查生成代码中的 v3 模式
  4. 04在 CI/CD 中阻止 v3 回退

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill tailwind-validator

安装后在 Claude Code 中输入/tailwind-validator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

plugin.json
references/
full-guide.md
scripts/
validate.py

详细介绍

Tailwind 4 验证器

用途

确保：

  • 项目使用 Tailwind v4 的 CSS 优先配置
  • 检测并标记旧的 tailwind.config.js 配置模式
  • 使用正确的 @theme 代码块，而不是 JS 配置
  • 依赖项为 v4+

适用场景

  • 开始任何 Tailwind 工作之前：先运行验证
  • 新项目设置：确保正确安装 v4
  • AI 生成 Tailwind 代码之后：确认没有混入 v3 模式
  • 审查现有项目：检查是否需要迁移
  • CI/CD 管道：防止回退到 v3

快速开始

python3 scripts/validate.py --root .
python3 scripts/validate.py --root . --suggest-fixes
python3 scripts/validate.py --root . --strict

检查内容

检查项正确（v4）错误（v3）
包版本"tailwindcss": "^4.0.0""^3.4.0"
CSS 配置@import "tailwindcss"; + @theme { --color-primary: ...; }@tailwind base/components/utilities;
配置文件无——配置位于 CSS 中tailwind.config.{js,ts,mjs,cjs}（在 v4 中已弃用）
PostCSS仅使用 plugins: { '@tailwindcss/postcss': {} }将 tailwindcss + autoprefixer 作为单独的插件
导入@import "tailwindcss/preflight" / .../utilities@tailwind 指令

完整的正确/错误示例和验证报告样例，请参阅 references/full-guide.md（§ 检查内容、§ 验证输出）。

迁移指南（v3 到 v4）

  1. 替换软件包：移除 tailwindcss/autoprefixer，添加 tailwindcss@latest + @tailwindcss/postcss
  2. 将 postcss.config.js 指向仅使用 @tailwindcss/postcss 插件
  3. 将 tailwind.config.js 中的 theme/extend 值转换为 CSS 中的 @theme { --color-*, --font-*, ... } 代码块
  4. 将 @tailwind 指令替换为 @import "tailwindcss"
  5. 删除 tailwind.config.{js,ts,mjs,cjs}

每个步骤的准确迁移前后代码以及 CI 工作流片段，请参阅 references/full-guide.md（§ 迁移指南、§ CI/CD 集成）。

应避免的常见 v3 模式

v3 模式v4 替代方案
@tailwind base@import "tailwindcss"
@tailwind utilities@import "tailwindcss/utilities"
tailwind.config.jsCSS 中的 @theme 代码块
theme.extend.colors--color-* CSS 变量
theme.extend.spacing--spacing-* CSS 变量
theme.extend.fontFamily--font-* CSS 变量
content: ['./src/**/*.tsx']无需设置（自动检测）
plugins: [require('@tailwindcss/forms')]@plugin "@tailwindcss/forms"

完整的 @theme 令牌示例和 shadcn/ui 令牌设置，请参阅 references/full-guide.md（§ v4 @theme 参考、§ 与 shadcn/ui 搭配使用）。

故障排除

  • “Found tailwind.config.js but using v4”——某些工具仍会生成 v3 配置。删除该文件，改用 @theme。
  • “@tailwind directives found”——替换为 @import "tailwindcss"。v4 不支持旧指令。
  • “autoprefixer in postcss.config”——移除 autoprefixer；它已内置于 @tailwindcss/postcss 中。
  • “content array in config”——v4 会自动检测内容文件。完全移除 content 配置。

评论

支持 Markdown