[ 備忘録 ]　Tailwind CSS1 文字系 

## [1] Tailwind CSSを使うには
### CDNをheadタグに追加する
``` index.html
 <script src="https://cdn.tailwindcss.com"></script>
```

``` index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     //  追加する
    <script src="https://cdn.tailwindcss.com"></script>rel="stylesheet">
</head>
```
https://tailwindcss.com/docs/installation

## [2] 文字の色を変更する  text-[color]


``` index.html
<h1 class="text-blue-700">TailWindCSS</h1>
<a href="" class="text-black">リンク</a>

```

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

## [3] 文字の配置　text-〇〇
``` index.html
// 右寄せになる
<h1 class="text-right">TailWindCSS</h1>

// カーソルを乗せると右寄せになる
<h1 class="text-left hover:text-right"">CSS</h1>
```

https://tailwindcss.com/docs/text-align

## [4]アンダーライン系
### アンダーラインと取り消し線

``` index.html
 // decoration-[color] で線の色を変更できる
 <p class="underline decoration-slate-50">アンダーライン</p>

 <p class="line-through ">取り消し線</p>
```

https://tailwindcss.com/docs/text-decoration

### アンダーラインの装飾
``` index.html
<p class="underline decoration-solid"> 普通の線</p>
<p class="underline decoration-double">二重線</p>
<p class="underline decoration-dotted">点線</p>
<p class="underline decoration-dashed">破線</p>
<p class="underline decoration-wavy">  波線</p>
```

![スクリーンショット 2022-02-28 20.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345080/1d87e0a3-3fae-1f88-9c6b-df51d3f8c455.png)

### アンダーラインの太さ 

decoration-[数字]で線の太さを変更できる
``` index.html
// text-2xlで文字サイズを大きくしています
<p class="text-2xl underline decoration-solid decoration-4">普通の線</p>
<p class="text-2xl underline decoration-solid decoration-3">普通の線</p>
<p class="text-2xl underline decoration-solid decoration-2">普通の線</p>
<p class="text-2xl underline decoration-solid decoration-1">普通の線</p>

```
![スクリーンショット 2022-02-28 20.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345080/241f74f3-2062-5a6d-7640-c8d78a03ae3b.png)

https://tailwindcss.com/docs/text-decoration-thickness


## [5]フォントファミリー

``` index.html
<p class="font-bold">TailwindCSS</p>
```
https://tailwindcss.com/docs/font-family

## [6] 文字の大きさ

``` index.html
<p class="text-sm">TailwindCSS</p>
<p class="text-base">TailwindCSS</p>
<p class="text-lg">TailwindCSS</p>
<p class="text-xl">TailwindCSS</p>
<p class="text-2xl">TailwindCSS</p>
<p class="text-5xl">TailwindCSS</p>
<p class="text-8xl">TailwindCSS</p>
<p class="text-9xl">TailwindCSS</p>

```
![スクリーンショット 2022-02-28 20.38.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345080/622e8f34-031c-d670-18de-4849fa6341f1.png)

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

## [7] 文字の太さ
``` index.html
//text-2xlで文字を大きくしています
<p class="text-2xl font-light">TailwindCSS</p>
<p class="text-2xl font-normal">TailwindCSS</p>
<p class="text-2xl font-medium">TailwindCSS</p>
<p class="text-2xl font-semibold">TailwindCSS</p>
<p class="text-2xl font-medium">TailwindCSS</p>
<p class="text-2xl font-bold">TailwindCSS</p>
```

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

## [8] 文字と文字の間隔


``` index.html
//text-2xlで文字を大きくしています
<p class="text-2xl tracking-tight">TailwindCSS</p>
<p class="text-2xl tracking-normal">TailwindCSS</p>
<p class="text-2xl tracking-wide">TailwindCSS</p>
```

![スクリーンショット 2022-02-28 20.49.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345080/7b166dc9-08c0-cdb8-fab0-a7261f4e8054.png)


``` index.html
//間隔を狭めたりもできる -tracking-[数字]
<p class="text-2xl -tracking-5">TailwindCSS</p>
```
https://tailwindcss.com/docs/letter-spacing


## [9] 行の高さ
``` index.html
<p class="leading-10">TailwindCSSの勉強をしています。....</p>
<p class="leading-loose">TailwindCSSの勉強をしています。....</p>
```
![スクリーンショット 2022-02-28 20.59.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2345080/7a5db912-7442-7ea7-75b2-7a9b89692bc8.png)

https://tailwindcss.com/docs/letter-spacing