tailwindcss-utilities について
tailwindcss-utilitiesは、カテゴリ別にTailwind CSSのユーティリティ情報を探すためのインデックスです。クラスの説明自体は含まず、各項目を対応する`tailwindcss-*`スキルとセクションに案内します。
主な機能
- 01レイアウト系をスキルに案内
- 02余白とサイズのカテゴリを索引化
- 03タイポグラフィ系を索引化
- 04色とエフェクトのカテゴリにリンク
- 05ボーダーと変形のガイドを案内
活用シーン
- 01Tailwindユーティリティのカテゴリ別ガイド検索
- 02カテゴリごとの使用例への移動
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/tailwindcss-utilitiesを入力して読み込まれたか確認します。
詳細
カテゴリ別の Tailwind CSS スキル — レイアウト、スペーシング、タイポグラフィ、背景、エフェクト、ボーダー、トランスフォーム — を横断するルーティングインデックスです。ユーティリティクラスのファミリー（flexbox/grid、padding/margin、font/text、色、シャドウ、ボーダー、transform/transition）を、それらを解説している特定の `tailwindcss-*` スキルとセクションに対応付けます。
ユーティリティクラスの内容自体は含みません。すべてのエントリは、実例を掲載しているカテゴリスキルへ直接リンクします。
Tailwind CSS ユーティリティリファレンス
レイアウト
- Flexbox、Grid、Position、Display -> tailwindcss-layout
スペーシング
- Padding -> tailwindcss-spacing
- Margin -> tailwindcss-spacing
- Width -> tailwindcss-sizing
- Height -> tailwindcss-sizing
タイポグラフィ
- Font size、font weight、text align、line height -> tailwindcss-typography
色とエフェクト
- カラーパレット、背景色 -> tailwindcss-backgrounds
- Box shadow -> tailwindcss-effects
- Opacity -> tailwindcss-effects
ボーダー
- Border width、border radius、outline -> tailwindcss-borders
トランスフォーム
- Transform、translate、rotate、scale -> tailwindcss-transforms
トランジション
- Transition property、animation -> tailwindcss-transforms
コメント
Markdown 対応