フォントに使えるユーティリティまとめ

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>