web-tailwind

web-tailwind

目的

このスキルを使うと、レスポンシブでユーティリティファーストな Web インターフェースの構築に向けて、Tailwind CSS 4 を活用した支援が可能になります。ユーティリティクラス、設定、JIT コンパイル、任意の値、ダークモード、プラグイン、shadcn/ui との統合などの機能に重点を置いています。

使用するタイミング

再利用可能なクラスを使って素早くスタイルを適用する必要がある Web プロジェクトの開発時に、このスキルを使用してください。たとえば、レスポンシブレイアウトの作成、ダークモードによるテーマ設定、shadcn/ui のビルド済みコンポーネントとの統合などが該当します。CSS の肥大化を抑える必要がある、React／Vue アプリや静的サイトのフロントエンド開発などの場面で活用してください。

主な機能

• スタイルを直接指定できるユーティリティクラス（例：'flex'、'p-4'、'hover:bg-blue-700'）。
• 必要に応じて CSS を生成し、バンドルサイズを抑える JIT モード。
• 独自のスタイルを指定できる任意の値（例：幅を指定する'w-[14rem]'）。
• 'dark:'プレフィックスまたはメディアクエリによるダークモードのサポート。
• カスタムユーティリティの追加など、機能を拡張するプラグイン。
• コンポーネントベースの UI キットである shadcn/ui との統合。
• ブレークポイントによるレスポンシブデザイン（例：中程度以上の画面向けの'md:flex'）。

使用パターン

Tailwind クラスを適用するには、マークアップ内の HTML 要素に直接追加します。設定を変更するには、tailwind.config.js ファイルを編集して、テーマのカスタマイズ、ユーティリティの拡張、JIT の有効化などを行います。CSS のエントリーポイントでは、Tailwind の base、components、utilities を必ずインポートしてください。shadcn/ui を使う場合は、リポジトリをクローンし、Tailwind クラスを使ってコンポーネントを統合します。ダークモードを有効にするには、設定で有効化し、'dark:'バリアントを使います。

例 1：レスポンシブなボタンを作成します。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded md:px-6">
  Click me
</button>

例 2：tailwind.config.js でダークモードを設定します。

module.exports = {
  darkMode: 'class',  // Use 'media' for OS-level or 'class' for manual toggle
  theme: { extend: {} },
};

一般的なコマンド／API

Tailwind CLI を使って、プロジェクトのビルドと初期化を行います。npx tailwindcss initを実行すると、tailwind.config.js が生成されます。npx tailwindcss -i ./input.css -o ./output.css --jitで CSS をビルドし、JIT モードを有効にします。未使用のスタイルを削除するには、設定にコンテンツのパスを追加します：content: ['./src/**/*.{html,js}']。API の面では、Tailwind に直接のエンドポイントはありませんが、JavaScript モジュールを通じて設定にアクセスできます。プラグインを追加するには、設定で次のように読み込みます：plugins: [require('tailwindcss/plugin')(function({ addUtilities }) { ... })]。

統合に関する注意

npm でインストールして Tailwind を統合します：npm install -D tailwindcss。React プロジェクトでは、index.js で出力 CSS をインポートします：import './output.css';。shadcn/ui の場合は、npx shadcn-ui@latest initを実行してフレームワークとして Tailwind を選択し、その後、Tailwind クラスを使ってボタンなどのコンポーネントを追加します。Vite または Webpack を使う場合は、Tailwind を処理するよう PostCSS を設定してください。環境変数は必要ありませんが、API ベースのツール（外部サービスで拡張する場合など）を使う際は、スクリプトで$TAILWIND_API_KEYを使用します。

エラー処理

JIT が有効にならない場合は、tailwind.config.js の設定ミスを確認してください（例：mode: 'jit'が設定されていることを確認します）。スタイルの削除に関するエラーが発生した場合は、コンテンツのパスに関連するすべてのファイルが含まれていることを確認し、--watchフラグを使ってデバッグモードを追加してください。よくある問題として、ユーティリティが見つからない場合はプラグインがインストールされていない可能性があります。npm でインストールして、ビルドを再起動してください。ダークモードが機能しない場合は、HTML 要素に'dark'クラスが追加されていることを確認し、CSS の競合がないか確認してください。任意の値に関するエラーは、CSS の単位（例：'px'または'rem'）が正しいか確認して解決してください。出力をテストするため、必ずnpx tailwindcss build --config tailwind.config.jsを実行してください。

グラフ上の関連性

• 関連するクラスター：web-dev（Web 開発向けのツールを共有しています）。
• 関連するタグ：tailwind（コアフレームワーク）、css（スタイル設定言語）、utility（クラスベースのアプローチ）、web（対象分野）。
• 関連する他のスキル：web-react（React コンポーネントとの統合）、web-vue（Vue.js プロジェクト向け）。