tailwindcss-utilities について
Tailwind CSSのユーティリティを分類し、該当するスキルを案内するインデックスです。開発者がクラス群の資料を探すためのもので、例そのものは含まず、各カテゴリのスキルにリンクします。
主な機能
- 01レイアウト系ユーティリティの案内
- 02間隔・サイズ系ユーティリティの分類
- 03タイポグラフィ・色の分類
- 04ボーダー・効果・変形の分類
- 05トランジションの資料へのリンク
活用シーン
- 01Tailwind CSSのユーティリティ群に対応するスキルを探す
- 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 対応