mcpField
T
tailwind-validator

tailwind-validator

github.com/shipshitdevテスト・品質38183 回インストール2 日前に更新
リポジトリ

tailwind-validator について

プロジェクトが Tailwind CSS v4 の規約に沿っているか確認するスキルです。v3 の設定パターンを検出し、検証や修正提案、厳格なチェックを実行できます。

主な機能

  1. 01Tailwind CSS のパッケージバージョン確認
  2. 02旧式の JavaScript 設定ファイル検出
  3. 03CSS ファーストの @theme 設定検証
  4. 04PostCSS プラグイン設定の確認
  5. 05修正提案と厳格なチェック

活用シーン

  1. 01新規 Tailwind プロジェクト設定の検証
  2. 02v4 への移行前のプロジェクト監査
  3. 03生成コードに残る v3 パターンの確認
  4. 04CI/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 Validator

目的

次の項目を確認します。

  • プロジェクトで Tailwind v4 の CSS ファースト設定が使用されていること
  • 古い tailwind.config.js のパターンを検出して警告すること
  • JS 設定ではなく、適切な @theme ブロックが使用されていること
  • 依存関係が 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 では非推奨）
PostCSSplugins: { '@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 対応