フォントに使えるユーティリティまとめ
TailwindCSSでは、たくさんのユーティリティが用意されています。本記事はフォントに使えるユーティリティをまとめました。
公式ドキュメント
フォントを変更する
index.html
<p class="font-sans">The quick brown fox jumps over the lazy dog.</p>
文字のサイズを変更する
index.html
<p class="text-xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-3xl ...">The quick brown fox ...</p>
<p class="text-4xl ...">The quick brown fox ...</p>
<p class="text-5xl ...">The quick brown fox ...</p>
<p class="text-6xl ...">The quick brown fox ...</p>
<p class="text-7xl ...">The quick brown fox ...</p>
<p class="text-8xl ...">The quick brown fox ...</p>
<p class="text-9xl ...">The quick brown fox ...</p>
文字の隙間を等間隔にする
<p class="font-mono ...">- 公式ドキュメント
index.html
<body>
<h1 class="text-red-500 text-5xl font-mono">Hello, World</h1>
</body>
-
font-monoなし
-
font-monoあり
フォントのカスタマイズ
- tailwind.config.jsのextendに記載すれば、フォントのカスタマイズもできます。
tailwind.config.js
module.exports = {
purge: ["./index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: { fantasy: "fantasy" },
},
},
variants: {
extend: {},
},
plugins: [],
};
文字をなめらかにする
- デフォルトは、
<p class="subpixel-antialiased">
index.html
<p class="subpixel-antialiased">The quick brown fox ...</p>
<p class="antialiased">The quick brown fox ...</p>
文字を斜めにする
index.html
<p class="italic">The quick brown fox ...</p>
文字の太さを変更する
index.html
<p class="font-thin">The quick brown fox</p>
<p class="font-extralight">The quick brown fox</p>
<p class="font-light">The quick brown fox</p>
<p class="font-normal">The quick brown fox</p>
<p class="font-medium">The quick brown fox</p>
<p class="font-semibold">The quick brown fox</p>
<p class="font-bold">The quick brown fox</p>
<p class="font-extrabold">The quick brown fox</p>
<p class="font-black">The quick brown fox</p>
文字の間隔を変更する
index.html
<p class="tracking-tighter">The quick brown fox ...</p>
<p class="tracking-tight">The quick brown fox ...</p>
<p class="tracking-normal">The quick brown fox ...</p>
<p class="tracking-wide">The quick brown fox ...</p>
<p class="tracking-wider">The quick brown fox ...</p>
<p class="tracking-widest">The quick brown fox ...</p>
行と行の間の隙間を変更する
index.html
<p class="leading-none">Lorem ipsum dolor sit amet ...</p>
<p class="leading-tight">Lorem ipsum dolor sit amet ...</p>
<p class="leading-snug">Lorem ipsum dolor sit amet ...</p>
<p class="leading-normal">Lorem ipsum dolor sit amet ...</p>
<p class="leading-relaxed">Lorem ipsum dolor sit amet ...</p>
<p class="leading-loose">Lorem ipsum dolor sit amet ...</p>
中黒のリストを作成する
- 公式ドキュメント
- 中黒の位置を外にするか、中にするか選べる
index.html
<body class="p-5">
<ul class="list-disc list-inside">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<ul class="list-disc list-outside">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
</body>