mcpField
T
tailwind-design-system-v4

tailwind-design-system-v4

github.com/blockmaticデザイン・UI1245 回インストール4 週間前に更新
リポジトリ

tailwind-design-system-v4 について

Tailwind CSS v4 でデザインシステムを構築する開発者向けのスキルです。CSS ファースト設定、デザイントークン、コンポーネントのバリアント、アクセシビリティに加え、v3 からの移行方法も扱います。

主な機能

  1. 01CSS ファースト設定とトークン
  2. 02コンポーネントバリアントとレスポンシブパターン
  3. 03アクセシブルなコンポーネント設計
  4. 04ダークモード設定
  5. 05Tailwind v3 の移行ガイド

活用シーン

  1. 01Tailwind v4 でコンポーネントライブラリを作成
  2. 02プロジェクトのテーマとトークンを設定
  3. 03レスポンシブでアクセシブルなコンポーネントを構築
  4. 04Tailwind v3 のプロジェクトを v4 に移行

インストール

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

$npx skills add https://github.com/blockmatic/basilic-skills --skill tailwind-design-system-v4

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

同梱ファイルPATTERNS.md

詳細

Tailwind Design System (v4)

Tailwind CSS v4 を使って、本番環境で利用できるデザインシステムを構築します。CSS ファーストの設定、デザイントークン、コンポーネントのバリアント、レスポンシブパターン、アクセシビリティを含みます。

注: このスキルは Tailwind CSS v4（2024年以降）を対象としています。v3 のプロジェクトについては、アップグレードガイドを参照してください。

このスキルを使用する場面

  • Tailwind v4 を使ったコンポーネントライブラリの作成
  • CSS ファーストの設定によるデザイントークンとテーマ設定の実装
  • レスポンシブでアクセシブルなコンポーネントの構築
  • コードベース全体での UI パターンの標準化
  • Tailwind v3 から v4 への移行
  • ネイティブ CSS 機能を使ったダークモードの設定

主な v4 の変更点

v3 のパターンv4 のパターン
tailwind.config.tsCSS 内の @theme
@tailwind base/components/utilities@import "tailwindcss"
darkMode: "class"@custom-variant dark (&:where(.dark, .dark *))
theme.extend.colors@theme { --color-*: value }
require("tailwindcss-animate")@theme 内の CSS @keyframes + 入場アニメーション用の @starting-style

CSS の設定、コンポーネントのパターン、移行については、PATTERNS.mdを参照してください。

コメント

Markdown 対応