Tailwind CSS

ユーティリティファーストのモダンCSSフレームワーク

Tailwind CSSとは？

日常での例え：レゴブロック

普通のCSS = 粘土

自由に形を作れるが、
毎回ゼロから成形が必要

Tailwind = レゴブロック

用意されたパーツ（クラス）を
組み合わせるだけで完成

「ユーティリティファースト」とは？

従来の方法：CSSファイルに .card { padding: 16px; } と書く

Tailwind：HTMLに直接 class="p-4" と書く

→ CSSファイルを行き来せず、HTMLだけ見れば完結する！

なぜTailwindが人気？

✓ CSSを書かずにスタイリングできる → 開発が速い

✓ クラス名を考える必要がない →「このボタンは何クラス名にしよう...」がなくなる

✓ 使ったクラスだけが出力される → ファイルサイズが小さい

✓ デザインシステムが自然と統一される → 一貫性のあるUI

Tailwindでできること

⚡

ユーティリティファースト

特徴

クラス名でスタイルを直接適用

📱

レスポンシブ対応

便利

sm:, md:, lg:で画面サイズ対応

🌙

ダークモード

便利

dark:プレフィックスで簡単実装

🎨

カスタマイズ

柔軟

tailwind.config.jsで自由に設定

🔄

ホバー・フォーカス

基本

hover:, focus:で状態スタイル

📦

小さなバンドル

性能

使用クラスのみ出力

コード例とプレビュー

基本的なスタイリング

クラス名で直接スタイル適用

html

<div class="p-4 bg-blue-500 text-white rounded-lg">
  パディング、背景色、文字色、角丸
</div>

<p class="text-xl font-bold text-gray-800">
  大きめの太字テキスト
</p>

<button class="px-4 py-2 bg-green-500 text-white rounded">
  ボタン
</button>

プレビュー

パディング、背景色、文字色、角丸

大きめの太字テキスト

スペーシング

m-（margin）、p-（padding）

html

<!-- マージン -->
<div class="m-4">全方向margin: 1rem</div>
<div class="mx-4">左右margin: 1rem</div>
<div class="my-2">上下margin: 0.5rem</div>
<div class="mt-8">上margin: 2rem</div>

<!-- パディング -->
<div class="p-6">全方向padding: 1.5rem</div>
<div class="px-4 py-2">左右1rem、上下0.5rem</div>

<!-- 数値: 1=0.25rem, 4=1rem, 8=2rem -->

プレビュー

m-4

p-6

px-4 py-2

Flexbox

flexとgapで簡単レイアウト

html

<div class="flex items-center justify-between gap-4">
  <div>左</div>
  <div>中央</div>
  <div>右</div>
</div>

<div class="flex flex-col gap-2">
  <div>縦並び1</div>
  <div>縦並び2</div>
</div>

<div class="flex flex-wrap gap-2">
  <div>折り返し対応</div>
</div>

プレビュー

左中央右

縦並び1

縦並び2

Grid

grid-colsでグリッドレイアウト

html

<div class="grid grid-cols-3 gap-4">
  <div class="bg-purple-500 p-4 text-white">1</div>
  <div class="bg-purple-500 p-4 text-white">2</div>
  <div class="bg-purple-500 p-4 text-white">3</div>
  <div class="bg-purple-500 p-4 text-white">4</div>
  <div class="bg-purple-500 p-4 text-white">5</div>
  <div class="bg-purple-500 p-4 text-white">6</div>
</div>

プレビュー

レスポンシブデザイン

sm:, md:, lg:, xl:で画面サイズ対応

html

<!-- モバイル1列、タブレット2列、PC3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- 画面サイズで表示切り替え -->
<div class="block md:hidden">モバイルのみ表示</div>
<div class="hidden md:block">タブレット以上で表示</div>

<!-- ブレークポイント -->
<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px -->

プレビュー

画面幅に応じてレイアウト変化

sm:640pxmd:768pxlg:1024px

ホバー・フォーカス

hover:, focus:で状態スタイル

html

<button class="
  bg-blue-500
  hover:bg-blue-600
  active:bg-blue-700
  text-white
  px-4 py-2
  rounded
  transition
">
  ホバーで色が変わる
</button>

<input
  class="
    border border-gray-300
    focus:border-blue-500
    focus:ring-2
    focus:ring-blue-200
    rounded px-3 py-2
    outline-none
  "
  placeholder="フォーカスで枠線変化"
>

プレビュー

ダークモード

dark:プレフィックスで切り替え

html

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
  <h2 class="text-gray-900 dark:text-white">
    タイトル
  </h2>
  <p class="text-gray-600 dark:text-gray-300">
    本文テキスト
  </p>
</div>

<!-- tailwind.config.js で darkMode: 'class' を設定 -->
<!-- <html class="dark"> でダークモード有効 -->

プレビュー

ライト

本文テキスト

ダーク

本文テキスト

カード例

よく使うコンポーネント例

html

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="image.jpg" alt="">
  <div class="p-6">
    <h3 class="font-bold text-xl mb-2">カードタイトル</h3>
    <p class="text-gray-600 text-sm">
      カードの説明文がここに入ります。
    </p>
    <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600
                   text-white py-2 rounded-lg transition">
      詳細を見る
    </button>
  </div>
</div>

プレビュー

カードタイトル

カードの説明文がここに入ります。

よく使うクラス一覧

サイズ

w-full, w-1/2, w-64

h-screen, h-full, h-32

max-w-md, min-h-screen

テキスト

text-sm, text-lg, text-2xl

font-bold, font-medium

text-center, text-right

色

bg-blue-500, bg-gray-100

text-white, text-gray-900

border-gray-200

レイアウト

flex, grid, block, hidden

items-center, justify-between

gap-4, space-x-2

前へ：SvelteKit 次へ：ユーティリティ