mcpField
T
tailwind

tailwind

github.com/hjewkesデザイン・UI443 回インストール35 週間前に更新
リポジトリ

tailwind について

tailwind は、テーマ設定や UI 構築を行う開発者向けの Tailwind CSS v4 スキルで、shadcn 関連の設定も扱います。4 段階の CSS 構成、一般的な問題の対処、コンポーネントパターン、ダークモード、移行ガイドを提供します。

主な機能

  1. 01Tailwind CSS v4 の設定ガイド
  2. 024 段階の CSS テーマ構成
  3. 03セマンティックトークンとレスポンシブ規則
  4. 04よくあるエラーの修正
  5. 05コンポーネントとダークモードのパターン
  6. 06v3 から v4 への移行ガイド

活用シーン

  1. 01Vite での Tailwind CSS v4 設定
  2. 02セマンティックカラーとダークモードの設定
  3. 03CSS とビルドエラーの調査
  4. 04プロジェクトの v3 から v4 への移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hjewkes/agent-skills --skill tailwind

インストール後、Claude Code で/tailwindを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
common-errors.md
dark-mode.md
migration.md
patterns.md
setup.md
templates/
components.json
index.css
utils.ts
vite.config.ts

詳細

Tailwind CSS v4

jezweb/claude-skills（tailwind-v4-shadcn + tailwind-patterns）を統合したものです。本番環境でテスト済みです。

セットアップのクイックスタート

pnpm add tailwindcss @tailwindcss/vite
pnpm add -D @types/node tw-animate-css
pnpm dlx shadcn@latest init
rm tailwind.config.ts  # v4 doesn't use this

@tailwindcss/vite プラグインを使用してください（PostCSS ではありません）。components.json で "config": "" を設定してください。

4 ステップの CSS アーキテクチャ

いずれかのステップを省略すると、テーマが正しく動作しません。詳細は references/setup.md を参照してください。

  1. :root の CSS 変数 — @layer base の中ではなく、hsl() で色を定義します
  2. @theme inline — CSS 変数を Tailwind のユーティリティにマッピングします（--color-background: var(--background)）
  3. @layer base — ラップしていない変数を使ってベーススタイルを適用します
  4. 結果 — bg-background はダークモードで自動的に切り替わるため、dark: プレフィックスは不要です

重要なルール

必ず行うこと：セマンティックトークンを使用する（bg-blue-500 ではなく bg-primary）、モバイルファーストにする（base → sm: → md:）、:root／.dark で hsl() を使う、スペーシングを統一する（4/6/8/12/16/24 のスケール）

行わないこと：tailwind.config.ts（v4 では無視されます）、@layer クラスでの @apply（代わりに @utility を使用）、hsl(var(--color)) の二重ラップ、生の色指定、.dark { @theme {} }、セマンティックカラーへの dark: バリアントの使用

エラーのクイックリファレンス

症状修正方法
bg-primary が動作しない@theme inline ブロックを追加します
色が黒／白になるhsl() の二重ラップを削除します
ダークモードが切り替わらないThemeProvider を追加し、<html> の .dark を確認します
ビルドに失敗するtailwind.config.ts を削除します
アニメーションエラーが発生するtailwindcss-animate を tw-animate-css に置き換えます
@apply で問題が発生する代わりに @utility ディレクティブを使用します
ベーススタイルが無視される@layer base でラップせず、ルートで定義します

解決策を含むエラーの詳細：references/common-errors.md

コンポーネントのパターン

パターンではセマンティックトークンを使用し、ダークモードに自動対応します。ライブラリ全体については references/patterns.md を参照してください。

// Container
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// Card
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">

// Button
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">

リファレンスファイル

  • references/setup.md — 4 ステップのアーキテクチャ全体 + vite の設定 + components.json
  • references/common-errors.md — 解決策付きの v4 のエラー 8 件
  • references/patterns.md — レイアウト、カード、ボタン、フォーム、ナビゲーション、タイポグラフィ
  • references/dark-mode.md — ThemeProvider、切り替え、OKLCH カラー
  • references/migration.md — v3 → v4 のチェックリストと注意点
  • templates/ — index.css、components.json、theme-provider.tsx、vite.config.ts、utils.ts

コメント

Markdown 対応