tailwind-design-system
Tailwind CSS v4 で、CSS の @theme に色や角の丸みの決まりを置き、CVA で部品の種類を分けた設計の仕組みを組ませる。v3 からの移し替えの点検表と、暗い配色の切り替えの例も添える
npx skills add wshobson/agents/tailwind-design-system入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 71,439
- 実用度
- 4
- GitHub star
- 42,260
- 最終更新
- 2026/11/6
頼み方の例
そのままコピーして使えますtailwind-design-systemスキルを使って、このプロジェクトの Tailwind の設定を v4 の書き方に移す計画を立ててください。tailwind.config の色を @theme の意味の名前に置き換える案と、ボタンの部品を CVA で種類と大きさに分ける案を出してください。ファイルはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: css
いつ使うか
Tailwind CSS v4 で、色・角の丸み・動きの決まりを 1 か所にまとめ、部品をその決まりの上に組みたいときに効きます。部品の集まりを作る、画面の書き方を揃える、v3 から v4 に移す、といった場面です。
- v3 と v4 の書き方の対照表
- 5 行
- 最初の例が定める色の決まり
- 17 個
- 同梱の文書にある部品の型
- 6 つ
- 同梱ファイル（2026-10-23 時点）
- 2 件
本文が挙げる場面
SKILL.md は使う場面を 6 つ挙げています。
- Tailwind v4 で部品の集まりを作る
- CSS で書く設定で、色などの決まり（デザイントークン）と配色を作る
- 画面の幅に合わせて変わる、使いやすい部品を作る
- コード全体で画面の型を揃える
- v3 から v4 に移す
- CSS の機能で暗い配色を用意する
v3 から v4 で変わる書き方
本文の要は、v3 の書き方と v4 の書き方を並べた 5 行の表です。
| v3 | v4 |
|---|---|
tailwind.config.ts | CSS の中の @theme |
@tailwind base/components/utilities | @import "tailwindcss" |
darkMode: "class" | @custom-variant dark (...) |
theme.extend.colors | @theme { --color-*: 値 } |
tailwindcss-animate の読み込み | @theme の中の @keyframes と @starting-style |
設定を JavaScript のファイルから CSS に移す、というのが v4 の中心の考え方です。
最初の例は、意味の名前で色を決める
すぐ使える例として、app.css の全体が載っています。背景・文字・主・副・控えめ・強調・削除・枠・輪・カードの色を、--color-primary と --color-primary-foreground のように「地の色」と「その上の文字の色」の組で定めます。値はすべて OKLCH で書かれています。
.dark の中で同じ名前の値を上書きし、暗い配色に切り替える形です。角の丸みは 4 段（--radius-sm から --radius-xl）、動きはふわっと出る・消える・滑り込む・滑り出るの 4 つが定められています。
決まりの 3 段と、部品の組み立ての順
決まりは「ブランドの値 → 意味の名前 → 部品で使う名前」の 3 段で考えます。例として、oklch(45% 0.2 260) が --color-primary になり、それが bg-primary で使われる、という流れが示されています。
- 基本の見た目すべての種類に共通する見た目
- 種類主・削除・枠だけなど、役割ごとの違い
- 大きさ小・標準・大・アイコン
- 状態押せない、選んでいるなどの見た目
- 上書き呼び出す側が足す class
部品はこの順に重ねて組み立てます。
同梱の文書にある 6 つの型
references/details.md に 4 つ、references/advanced-patterns.md に 2 つの型があります。本文の要約で足りないときに読め、と SKILL.md に書かれています。
- CVA のボタン種類 6 つ（標準・削除・枠・副・透明・リンク）と大きさ 4 つを型の安全な引数で切り替える
- 組み合わせる部品カードを見出し・説明・中身・足元に分けて組む
- 入力の部品誤りの文を
aria-invalidとrole="alert"で伝える。React Hook Form と Zod の例つき - 画面の幅で変わる格子列は 1〜6、すき間は 5 段。中央に寄せる入れ物も
- CSS だけの動きダイアログの出入りと、
@starting-styleを使ったポップオーバーの出方 - 暗い配色の切り替え選んだ配色を localStorage に残し、OS の設定にも合わせる
部品の例はどれも React 19 の書き方で、forwardRef を使わず ref を普通の引数として受け取ります。class をまとめる cn()（clsx と tailwind-merge の組み合わせ）も載っています。
一歩進んだ v4 の書き方
advanced-patterns.md の後半には、自分の道具を作る @utility、ほかの変数を参照する @theme inline、使っていなくても変数を出す @theme static があります。--color-*: initial で Tailwind の既定の色をすべて消してから自分の色だけを定める書き方、color-mix() で半透明の段を作る書き方、コンテナの大きさの決まりも載っています。
使わないほうがいいとき
v3 のままのプロジェクト
このスキルは v4（2024 年以降）を相手にしています。v3 のプロジェクトなら、Tailwind の公式の移行の手引きを先に見よ、と本文の冒頭に書かれています。v4 は新しい CSS の機能に頼るので、古いブラウザに対応したいなら v3.4 に留まるよう、公式の移行の手引きは書いています。
部品の集まりを一から作らず、既製のものを入れたいとき
このスキルの部品の例は、ボタン・カード・入力・格子などの作り方の見本です。既製の部品を CLI で入れて使いたいなら shadcn が向きます。見た目の方向そのものを決めたいなら frontend-design の担当です。
React 以外の枠組み
CSS の設定の部分は枠組みを問いませんが、部品の例はすべて React 19 の書き方です。Vue や Svelte では、CVA の考え方だけを借り、部品は書き直すことになります。
注意点
解析で見つかった記述
SKILL.md と同梱の文書に、外部との通信、シェルでの実行、ファイルの書き換えの手順はありません。中身はすべて CSS と TypeScript のコード例と説明です。同梱ファイルは references/ の 2 件です（2026-10-23 時点）。
部品の例に v3 の名前が残っている
同じ手引きは、ring の既定の太さが 3px から 1px に、枠の既定の色が灰色から currentColor に変わったことも挙げています。例を写すときは、移行の手引きの名前の変更の表と照らしてください。
動きの置き場所が 2 通りある
移行の点検表は「@keyframes を @theme の中に移す」と書き、最初の例もそうしています。一方、同梱の文書のダイアログの動きは、@keyframes を @theme の外に置いています。どちらに揃えるかを先に決めておくと、決まりの置き場所が散りません。
「ポップオーバーを使ったダイアログ」の中身
同梱の文書のダイアログの部品は、見出しに「ブラウザのポップオーバーの仕組みを使う」とありますが、部品そのものは Radix UI のダイアログで作られています。@starting-style を使ったポップオーバーの CSS は、その上に別に書かれた例です。
暗い配色の切り替えの例
配色の切り替えの例は、保存した配色を useEffect の中で localStorage から読みます。最初の描画は既定の配色で行われ、その後に保存した配色へ切り替わる形です。「OS の設定に合わせる」を選んだときも、OS の設定が途中で変わったのを受け取る仕組みはありません。
守ることと、しないこと
最後の節に、することとしないことが 6 項目ずつあります。
@themeで設定を書き、OKLCH の色を使う- 種類の切り替えは CVA で組む
bg-blue-500ではなくbg-primaryのような意味の名前を使う- 任意の値（
[13px]のような書き方）を使わず、@themeを広げる - 暗い配色を忘れず、両方の配色で確かめる
大きな集まりの一部
このスキルは wshobson/agents のプラグイン frontend-mobile-development に入っています。同じプラグインに、ほかのスキルが 3 件（Next.js の App Router、React Native、React の状態管理）、エージェントの定義が 2 件、命令が 1 件あります（2026-10-23 時点）。リポジトリの README は、Claude Code と Codex の両方での導入の手順を載せています。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
よくある質問
tailwind.config.ts はもう使えないのですか
本文の「しないこと」には、tailwind.config.ts を使わず CSS の @theme で書け、とあります。移行の点検表の 1 番目も、設定のファイルを @theme の塊に置き換えることです。このスキルに従うなら、色や丸みの決まりは CSS の側に移します。
なぜ色を OKLCH で書くのですか
本文は、HSL より人の目に揃って見える色の段を作りやすいから、と理由を挙げています。最初の例の色はすべて OKLCH で書かれ、移行の点検表にも「OKLCH の色を検討する」という項目があります。
暗い配色はどう切り替えますか
@custom-variant dark (&:where(.dark, .dark *)); で、.dark の class が付いた中を暗い配色として扱います。.dark の中で色の変数を上書きし、<html> に dark の class を付け外しする形です。同梱の文書に、その class を付け外しする部品の例があります。
同梱ファイルには何がありますか
references/details.md に、ボタン・カード・入力・格子の 4 つの部品の型と、class をまとめる cn() があります。references/advanced-patterns.md には、CSS だけの動き、暗い配色の切り替え、@utility などの一歩進んだ書き方、v3 からの移行の点検表 10 項目、することとしないことの一覧があります（2026-10-23 時点）。