[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>

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

index.html

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

[3] 文字の配置　text-〇〇

index.html

// 右寄せになる
<h1 class="text-right">TailWindCSS</h1>

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

[4]アンダーライン系

アンダーラインと取り消し線

index.html

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

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

アンダーラインの装飾

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>

アンダーラインの太さ

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>

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

index.html

<p class="font-bold">TailwindCSS</p>

[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>

[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>

[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>

index.html

//間隔を狭めたりもできる -tracking-[数字]
<p class="text-2xl -tracking-5">TailwindCSS</p>

[9] 行の高さ

index.html

<p class="leading-10">TailwindCSSの勉強をしています。....</p>
<p class="leading-loose">TailwindCSSの勉強をしています。....</p>