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

# フォントに使えるユーティリティまとめ
TailwindCSSでは、たくさんのユーティリティが用意されています。本記事はフォントに使えるユーティリティをまとめました。
[公式ドキュメント](https://tailwindcss.com/docs/font-family)

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


## フォントを変更する
* [公式ドキュメント](https://tailwindcss.com/docs/font-family)

```html:index.html
<p class="font-sans">The quick brown fox jumps over the lazy dog.</p>
```

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

## 文字のサイズを変更する
* [公式ドキュメント](https://tailwindcss.com/docs/font-size)

```html: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>
```

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

## 文字の隙間を等間隔にする
* ```<p class="font-mono ...">```
* [公式ドキュメント](https://tailwindcss.com/docs/font-family#monospaced)


```html:index.html
  <body>
    <h1 class="text-red-500 text-5xl font-mono">Hello, World</h1>
  </body>
```

https://tailwindcss.com/docs/font-family#monospaced

* font-monoなし
![font-monoなし](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/217d16d2-aa0c-632f-7e5d-a38738a9a2cc.png)

* font-monoあり
![font-monoあり](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/4fe82fe0-429a-c095-b2df-728d24d66016.png)

https://tailwindcss.com/docs/font-family#monospaced

### フォントのカスタマイズ
* tailwind.config.jsのextendに記載すれば、フォントのカスタマイズもできます。
 
```javascript:tailwind.config.js
module.exports = {
  purge: ["./index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: { fantasy: "fantasy" },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
```

## 文字をなめらかにする
*[公式ドキュメント](https://tailwindcss.com/docs/font-smoothing)
* デフォルトは、```<p class="subpixel-antialiased">```


```html:index.html
    <p class="subpixel-antialiased">The quick brown fox ...</p>
    <p class="antialiased">The quick brown fox ...</p>
```

## 文字を斜めにする
* [公式ドキュメント](https://tailwindcss.com/docs/font-style)

```html:index.html
<p class="italic">The quick brown fox ...</p>
```

## 文字の太さを変更する
* [公式ドキュメント](https://tailwindcss.com/docs/font-weight)

```html: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>
```

## 文字の間隔を変更する

* [公式ドキュメント](https://tailwindcss.com/docs/letter-spacing)

```html: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>
```

## 行と行の間の隙間を変更する

* [公式ドキュメント](https://tailwindcss.com/docs/line-height)

```html: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>
```

## 中黒のリストを作成する
* [公式ドキュメント](https://tailwindcss.com/docs/list-style-position)
* 中黒の位置を外にするか、中にするか選べる

![スクリーンショット 2021-09-18 16.09.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/0f449104-5a79-ef24-9836-a834e9c0f306.png)


```html: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>
```