🦁

TailwindCSSまとめ

2024/12/24に公開

Tailwind CSS

tech

TailwindCSSとは

CSSフレームワークの1つ。

CSSフレームワークの例として他には
Bootstrap, Foundationなどがある
少し前はBootstrapの勢いがあったが、最近はTailwindCSSが人気

CSSフレームワークの読み込み方

HTMLのhead内にscriptタグの設定用の記述を追加する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TailwindCSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline m-8">
    TailwindCSSのスタイル
  </h1>
</body>
</html>

TailwindCSSのスタイル一覧

テキスト関連

フォントサイズ

<p class="text-sm"></p>

テキストの色

<p class="text-blue-300"></p>

テキストの配置

<p class="text-center"></p>

margin , padding

<p class="m-4 p-4"></p>
<p class="mb-4 pt-4"></p>
<p class="mx-4 py-4"></p>

flexボックス

<div class="flex">
  <div class="flex-1">子要素を横並びに均等にする。1:1</div>
  <div class="flex-1">子要素を横並びに均等にする。1:1</div>
</div>

<div class="flex flex-col gap-4">
  <div>子要素を縦並びにする</div>
  <div>子要素を縦並びにする</div>
</div>

<div class="flex justify-center">
  <div>子要素を中央ぞろえにする</div>
</div>

背景色

<p class="bg-red-300">背景は赤300</p>

ボーダーライン

<p class="border-b-4 border-red-700">下部のみに太さ4赤700のボーダーライン</p>

<p class="shadow-lg">largeサイズの影</p>

Grid
こんな感じで、Gridレイアウトをレスポンシブで簡単に書ける

  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
    <div>横並び要素</div>
　　<div>横並び要素</div>
　　<div>横並び要素</div>
  </div>

TailwindCSSとは

CSSフレームワークの読み込み方

TailwindCSSのスタイル一覧

Discussion