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