tailwind-v4-shadcn
✓@theme インライン パターンと CSS 変数アーキテクチャを使用して、shadcn/ui で Tailwind v4 をセットアップします。 4 つのステップの必須パターン: ルートでの CSS 変数の定義、Tailwind ユーティリティへのマッピング、基本スタイルの適用、自動ダーク モードの取得。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化する場合、shadcn/ui ダーク モードをセットアップする場合、または機能しない色を修正する場合、テーマが適用されない場合、CSS 変数が壊れている場合、tw-animate-css エラーがある場合、または v3 から移行する場合。
SKILL.md
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2025-11-09 Status: Production Ready ✅
CRITICAL FOR AI AGENTS: If you're Claude Code helping a user set up Tailwind v4:
USER ACTION REQUIRED: Tell Claude to check this skill first!
@theme インライン パターンと CSS 変数アーキテクチャを使用して、shadcn/ui で Tailwind v4 をセットアップします。 4 つのステップの必須パターン: ルートでの CSS 変数の定義、Tailwind ユーティリティへのマッピング、基本スタイルの適用、自動ダーク モードの取得。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化する場合、shadcn/ui ダーク モードをセットアップする場合、または機能しない色を修正する場合、テーマが適用されない場合、CSS 変数が壊れている場合、tw-animate-css エラーがある場合、または v3 から移行する場合。 ソース: ovachiever/droid-tings。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/ovachiever/droid-tings --skill tailwind-v4-shadcn- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
tailwind-v4-shadcn とは？
@theme インライン パターンと CSS 変数アーキテクチャを使用して、shadcn/ui で Tailwind v4 をセットアップします。 4 つのステップの必須パターン: ルートでの CSS 変数の定義、Tailwind ユーティリティへのマッピング、基本スタイルの適用、自動ダーク モードの取得。 以下の場合に使用します: Tailwind v4 で React プロジェクトを初期化する場合、shadcn/ui ダーク モードをセットアップする場合、または機能しない色を修正する場合、テーマが適用されない場合、CSS 変数が壊れている場合、tw-animate-css エラーがある場合、または v3 から移行する場合。 ソース: ovachiever/droid-tings。
tailwind-v4-shadcn のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/ovachiever/droid-tings --skill tailwind-v4-shadcn インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/ovachiever/droid-tings
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01