Tailwind CSSのタイポグラフィ

見出しの文字サイズや太さ、文字の配置などタイポグラフィを設定していきましょう。
毎回同じクラス属性を書かなくても良いよう、要素のデフォルトスタイルを指定する方法も紹介します。

• Tailwind CSSのタイポグラフィについて
• タイポグラフィの設定を行う
• 文字の大きさ・太さ
• 文字の揃え位置
• 文字色と装飾（text-decoration）
• 要素のデフォルトスタイルを指定する
• 表示する行数の制御

Tailwind CSSのタイポグラフィについて

TailwindCSSは、デフォルトだと“Preflight”というベーススタイルセットが読み込まれ、見出しのスタイル、見出しや段落に対する余白などが削除されています。リセットCSSを読み込んだような状態になっているわけです。

ですので、h2やh3でマークアップした文字も、pタグの文字も、特にスタイル指定をしていない現在は同じ大きさ。
何タグで囲っているのか区別がつかないような表示です。

↓

完成見本に近づくよう、見出しや段落の設定をしてみましょう。
Tailwind CSSでタイポグラフィ（文字の体裁：書体、大きさ、行間、配列など）を設定するには、以下３つの方法があります。

• それぞれタグ毎にユーティリティクラスを追加する
• 要素に対するスタイル指定を設定する
• 独自CSSクラスを自作して、適用する

TailwindCSSでは「まずはユーティリティを使用」「複数回使用する必要があれば、共通化せよ」という進め方が推奨されていますので、文字関係のユーティリティクラスの確認からしていきましょう。

タイポグラフィの設定を行う

文字の大きさ・太さ

文字の大きさ（Font size）

hタグで囲まれた、見出しの文字サイズと太さを変えていきましょう。
公式ドキュメントでは、文字に関するユーティリティが「Typography」のグループにまとめられています。

まずは、文字の大きさを決めるFont Sizeをみてみましょう。

https://tailwindcss.com/docs/font-size

text-の後に、Tailwindで定義されているサイズ名を入れたものがクラス名になります。

hタグにそれぞれクラスを指定してみましょう。

• h1：text-3xl（そのまま）
• h2：text-2xl
• h3：text-xl

スマホ幅で見たときに大きすぎないかを確認します。

問題なければ、表示領域の幅を広げてみましょう。

タブレット幅

PCモニター幅

広い画面で見るときは、もう少し大きくても良さそうです。
Breakpoint prefixのxl:を使って、幅1280px以上で表示する場合はそれぞれワンサイズ大きくなるようにクラスを加えます。

文字の太さ（Font Weight）

次に、文字の太さを決めるFont Weight。

CDNのサンプルコードでは、h1のクラス属性にfont-boldクラスが使われていました。
こちらはそのまま、h2とh3タグにもfont-mediumクラスを加えてみます。

h2要素の場合、class属性の指定は以下のようになります。

<h2 class="text-2xl xl:text-3xl font-medium">
    ここに見出しがはいります。
</h2>

※ OS（デフォルトフォント）により、見え方は異なります。

文字の揃え位置

文字の“水平方向の揃え方”を指定するtext-alignで、ヒーロー部分の文字を中央揃えにします。
ドキュメントでは Typography >Text Align で確認できます。

h1とspanを囲っているdivタグにtext-centerクラスを追加。

spanタグの文字も xl 以上でワンサイズ大きくなるよう、クラス属性を追加。
少し間を空けて読みやすくするために、h1にはmb-3クラスを加えます。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md shadow-black/40 text-center">
    <h1 class="text-3xl xl:text-4xl font-bold mb-3 underline text-orange-500">
        Tailwind トマト農園
    </h1>
    <span class="xl:text-lg">
        キレイな空気と水で育てた自慢のトマト
    </span>
</div>

文字色と装飾（text-decoration）

公式ドキュメントのメニューでは、Text Alignのすぐ下に文字色を設定するText Colorへのリンクがあります。
その更に下には、テキストの装飾的な線の表示をするtext-decoration関連のユーティリティが並んでいますね。

URL：https://tailwindcss.com/docs/text-color

CDNサンプルコードの h1タグには、text-decoration-line: underline;を適用するためのunderlineがあらかじめ指定されています。
解説では文字色を変えるためのtext-orange-500クラスも加えました。

この２つをh3タグのクラス属性の方へカット・アンド・ペーストで移します。

　　↓

文字色を青系の色に変えてみましょう。
青系なら、どのクラスを使っても良いです。

<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline">
    Sample Tomato
</h3>

underlineの色は自動で文字色と同じになります。
別途指定してみたい方は、ドキュメントのText Decoration Colorのぺージを参考にクラスを書いてください。

要素のデフォルトスタイルを指定する

ここまで文字部分のCSSを設定してきましたが、p要素に余白が無いのはちょっと不便。
下図、赤い矢印のところに少し余白があるだけでも、見やすくなります。

ですが、毎回毎回classを書くのは大変。
赤い点線で囲ったところに段落（p）を増やしたい、なんてときにも、ずっと書き続けるのは面倒ですよね。

ですので、p要素には自動的にmarginが入るように設定してみましょう。
styleタグで直接書くなどの方法もありますが、今回はTailwindCSSで用意されている機能を使ってカスタムしてみましょう。

head内、CDNコードの下に以下のように書きます。

<style type="text/tailwindcss">
    @layer base {
        p {
            @apply my-3;
        }
    }
</style>

実際のindex.htmlだと、以下のようになります。

ブラウザでCSSが効いているか見てみましょう。

すべてのp要素に対して、TailwindCSSの“my-3”クラスと同じスタイル指定（上下marginそれぞれ0.75rem）が適用されました！

公式Documentsで参考にしたページ

TailwindCSSは、本格導入する場合はnpmやフレームワーク経由のインストールが推奨されています。
そのため、CDN版でのカスタムは、そこまで詳細に紹介されていません。
上のコードも覚える必要はありません。必要時にDocuments、もしくはWeb検索で調べて書けば大丈夫。

ちなみに、今回参考にしたページは以下の２つ。

CDN版でのカスタムCSSの追加方法は、Installation >Get startedページ、play CDNタブ。
3の「Try adding some custom CSS」で紹介されています。

https://tailwindcss.com/docs/installation/play-cdn

以下２つはCore Concepts > Functions & Directives のページで解説されています。

• CSSがどのレイヤーに属するか、@layerで指定できるレイヤー
• 既存のユーティリティ クラスを、独自カスタムCSSに反映する@apply機能

https://tailwindcss.com/docs/functions-and-directives#layer

@layerで指定するレイヤーは、以下のように分かれいるとイメージすると良いです。

• @layer base ： デフォルトのスタイル調整
• @layer components ： コンポーネントベースのスタイル用
• @layer utilities ： ユーティリティクラス（最優先）

表示する行数の制御

ページ下部、4つ並んでいるdivタグのところ。
例えば、保存されている情報をループ処理で表示したりする場合、以下のように表示が汚くなってしまうかもしれません。

Line Clamp（-webkit-line-clamp）を設定しておくと、こうした状態が予防できます。

https://tailwindcss.com/docs/line-clamp

index.htmlで、Line Clampのユーティリティクラスを追加してみましょう。
h3タグは1行、pタグは2行までに制限します。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
    <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
        Sample Tomato
    </h3>
    <p class="line-clamp-2">
        sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
    </p>
</div>

pタグの方は、２行目の末尾に「…」が出て省略されています。

次回はカード風のデザインを作って、ページを完成させますよ！