tailwindcss-typography について
tailwindcss-typography は、Tailwind CSS v4.3 でテキストをスタイリングする開発者向けのリファレンススキルです。フォント、テキスト表現、間隔、装飾のユーティリティを整理し、新しい機能にはバージョン情報も記載します。
主な機能
- 01フォントファミリー、サイズ、太さのユーティリティ
- 02テキストカラーと配置
- 03折り返しとテキストシャドウ
- 04タブ幅と文字間隔
- 05行間、装飾、変換
活用シーン
- 01Tailwind CSS のレイアウトで使うタイポグラフィユーティリティの選定
- 02テキストの折り返しや装飾オプションの確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/tailwindcss-typographyを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/fonts.mdspacing.mdtext.md詳細
Tailwind CSS v4.3 のタイポグラフィユーティリティの完全なリファレンスです。フォントファミリー（`font-sans`／`font-serif`／`font-mono`）、フォントサイズとウェイト、`font-features-*`（v4.2 以降）、テキストカラー／配置、`balance`／`pretty` の値を含むテキストの折り返し（v3.4 以降）、`text-shadow` ユーティリティ（v4.1 以降）、`tab-*` のタブサイズ（v4.3 以降）、文字間隔（`tracking-*`）、行の高さ（`leading-*`）、テキストの装飾、テキストの変換（`uppercase`／`lowercase`／`capitalize`）を扱います。
Tailwind CSS Typography v4.3
Tailwind CSS v4.3 で、フォントファミリー、サイズ、ウェイト、テキストのスタイル、間隔、装飾を制御するタイポグラフィユーティリティです。
主な機能
- フォントファミリー：font-sans、font-serif、font-mono
- フォントサイズ：スケーリングに対応した text-xs から text-9xl
- フォントウェイト：thin、extralight、light、normal、medium、semibold、bold、extrabold、black
- テキストカラー：すべてのカラーパレットに対応
- テキスト配置：left、center、right、justify
- フォント機能：
font-feature-settings用のfont-features-[…]（v4.2 以降） - テキストの折り返し：wrap、nowrap、balance、pretty（v3.4 以降）
- テキストシャドウ：text-shadow 効果（v4.1 以降）
- タブサイズ：
tab-size用のtab-<number>（v4.3 以降） - 文字間隔：tracking の値
- 行の高さ：leading の値
- テキストの装飾：装飾のスタイルと色
- テキストの変換：uppercase、lowercase、capitalize、normal-case
詳細リファレンス
- fonts.md - フォントファミリー／サイズ／ウェイトの値、イタリック、数値バリエーション、font-feature-settings、フォントのスムージングを選ぶ際に読み込みます
- text.md - テキストカラー、配置、折り返し（balance／pretty）、text-shadow、装飾、変換、空白、タブサイズのスタイルを設定する際に読み込みます
- spacing.md - 文字間隔（tracking）や行の高さ（leading）を調整する際に読み込みます
コメント
Markdown 対応