tailwind について
Tailwindは、トピック別のルールで構成されたTailwind CSS v4のリファレンススキルです。ユーティリティクラス、テーマ、レスポンシブ状態、カスタムスタイル、パフォーマンス、アクセシビリティを扱い、Figma変数からテーマCSSを作る手順も含みます。
主な機能
- 01ユーティリティファーストのモデルとクラス構成
- 02テーマ変数とデザイントークン
- 03レスポンシブ、操作状態、ダークモードのバリアント
- 04カスタムスタイルとユーティリティ
- 05ビルド時のスキャンとパフォーマンス指針
- 06Figma変数からTailwindテーマCSSを生成
活用シーン
- 01Tailwind v4の設定方法を調べる
- 02テーマトークンを定義または調整する
- 03レスポンシブ、フォーカス、ダークモードのスタイルを追加する
- 04Figma変数からテーマCSSを生成する
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/tailwindを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
figma-tokens/breakpoints.csscolors.cssradius-shadows.cssspacing.csstypography.cssrules/_coverage-map.md_sections.mda11y-and-dark-mode.mdcore-custom-styles.mdcore-responsive-and-states.mdcore-theme-variables.mdcore-utility-model.mdfigma-to-theme-workflow.mdperf-purging-and-scanning.md詳細
Tailwind CSS のベストプラクティス
モジュール化されたルールで構成された Tailwind CSS v4 ガイドです。ユーティリティファーストモデル、@theme 変数、レスポンシブ／状態バリアント、カスタムスタイル、パフォーマンス、アクセシビリティに加え、Figma の変数からデザイントークンを直接生成する Figma → Tailwind テーマのワークフローを扱います。
ROUTING：読み込むルールファイル
Tailwind のセットアップや、ユーティリティクラスの仕組みを理解する場合：
→ rules/core-utility-model.md を読んでください
テーマ変数（@theme）、デザイントークン、カラー、フォント、スペーシングを扱う場合：
→ rules/core-theme-variables.md を読んでください
レスポンシブデザイン、ホバー／フォーカス状態、ダークモード、カスタムバリアントを扱う場合：
→ rules/core-responsive-and-states.md を読んでください
カスタム CSS、コンポーネントクラス、ベーススタイル、カスタムユーティリティを追加する場合：
→ rules/core-custom-styles.md を読んでください
ビルドサイズの最適化、未使用クラスの削除、コンテンツ検出の設定を行う場合：
→ rules/perf-purging-and-scanning.md を読んでください
アクセシビリティやダークモードの方針を扱う場合：
→ rules/a11y-and-dark-mode.md を読んでください
Figma の変数／デザイントークンを Tailwind v4 のテーマ CSS に変換する場合：
→ rules/figma-to-theme-workflow.md を読み、figma-tokens/ のテンプレートを参照してください
ルールの索引
| トピック | 説明 | ファイル |
|---|---|---|
| セクションの概要 | カテゴリと推奨される読み進め方 | rules/_sections.md |
| ユーティリティモデル | ユーティリティファーストの原則、クラスの組み合わせ、任意の値 | rules/core-utility-model.md |
| テーマ変数 | @theme ディレクティブ、名前空間、拡張／上書き、inline／static | rules/core-theme-variables.md |
| レスポンシブと状態 | ブレークポイント、ホバー／フォーカス／ダークモードのバリアント、カスタムバリアント | rules/core-responsive-and-states.md |
| カスタムスタイル | @layer、@utility、@variant、コンポーネントクラス | rules/core-custom-styles.md |
| パフォーマンス | コンテンツ検出、JIT、ビルドの最適化 | rules/perf-purging-and-scanning.md |
| アクセシビリティとダークモード | アクセシビリティユーティリティ、ダークモードのパターン | rules/a11y-and-dark-mode.md |
| Figma ワークフロー | エージェントのワークフロー：Figma の変数 → Tailwind の @theme CSS | rules/figma-to-theme-workflow.md |
Figma → Tailwind テーマのワークフロー
このスキルには、Figma のデザイン変数を Tailwind v4 の @theme CSS ファイルに変換する専用のエージェントワークフローが含まれています。このワークフローの説明は rules/figma-to-theme-workflow.md にあり、出力先として figma-tokens/ の注釈付きテンプレートを使用します。
実行方法： Figma の CSS 変数をチャットに貼り付け、Tailwind のテーマファイルを生成するようエージェントに依頼してください。
figma-tokens/ のテンプレートファイル：
colors.css—--color-*名前空間typography.css—--font-*、--text-*、--font-weight-*、--tracking-*、--leading-*spacing.css—--spacingと--spacing-*radius-shadows.css—--radius-*、--shadow-*breakpoints.css—--breakpoint-*
優先度別のルールカテゴリ
| 優先度 | カテゴリ | 影響度 | 接頭辞 |
|---|---|---|---|
| 1 | ユーティリティモデルとテーマ | CRITICAL | core- |
| 2 | レスポンシブと状態 | HIGH | core- |
| 3 | カスタムスタイル | HIGH | core- |
| 4 | Figma ワークフロー | HIGH | （単独） |
| 5 | パフォーマンス | MEDIUM-HIGH | perf- |
| 6 | アクセシビリティ | MEDIUM | a11y- |
対応範囲とメンテナンス
- 対応範囲マップ：
rules/_coverage-map.md - ソース：https://tailwindcss.com/docs (v4.2)
@themeの破壊的変更を伴う Tailwind の新しいメジャー／マイナーバージョンがリリースされた際に更新してください。