Tailwind CSSでスタイリング
このページで学ぶこと
- Tailwind CSS とは何かがわかる
- よく使うユーティリティクラスを使えるようになる
- レスポンシブデザインの基本がわかる
Tailwind CSS とは
Tailwind CSS はユーティリティファーストな CSS フレームワークです。
通常のCSSでは「クラス名を考えて、別ファイルにCSSを書く」という流れでした。
Tailwind では「あらかじめ用意されたクラスをHTMLに直接書く」だけでスタイルが当たります。
/* 通常のCSS（こう書いていた） */
.card {
padding: 16px;
border-radius: 8px;
background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}{/* Tailwind（こう書く） */}
<div className="p-4 rounded-lg bg-white shadow">
カード
</div>Tailwind のセットアップ
ステップ1: インストール
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pステップ2: tailwind.config.js を設定
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}ステップ3: globals.css にディレクティブを追加
app/globals.css を開いて、中身の先頭に以下を追加する。
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;これで Tailwind が使えるようになります。
よく使うクラス一覧
間隔（スペーシング）
Tailwind では数字が 4px の倍数に対応しています（p-1 = 4px、p-4 = 16px）。
| クラス | 意味 |
|---|---|
p-4 | padding: 16px（全方向） |
px-4 | padding-left/right: 16px |
py-2 | padding-top/bottom: 8px |
m-4 | margin: 16px |
mt-8 | margin-top: 32px |
gap-4 | flexやgridの間隔 |
テキスト
| クラス | 意味 |
|---|---|
text-sm | font-size: 14px |
text-xl | font-size: 20px |
font-bold | font-weight: bold |
text-gray-600 | グレーのテキスト |
text-center | テキストを中央揃え |
色
| クラス | 意味 |
|---|---|
bg-blue-500 | 背景色：青 |
text-white | テキスト：白 |
border-gray-200 | ボーダー：薄いグレー |
レイアウト
| クラス | 意味 |
|---|---|
flex | display: flex |
flex-col | flex-direction: column |
items-center | align-items: center |
justify-between | justify-content: space-between |
grid | display: grid |
grid-cols-3 | グリッド3列 |
その他
| クラス | 意味 |
|---|---|
rounded-lg | border-radius: 8px |
shadow | ボックスシャドウ |
border | 1pxボーダー |
w-full | width: 100% |
max-w-lg | max-width: 32rem |
やってみよう
ステップ1: カードコンポーネントをスタイリングする
// components/Card.js
export default function Card({ title, description }) {
return (
<div className="bg-white rounded-lg shadow p-6 mb-4">
<h2 className="text-xl font-bold text-gray-800 mb-2">{title}</h2>
<p className="text-gray-600">{description}</p>
</div>
)
}ステップ2: ナビゲーションバーを作る
// components/Navbar.js
import Link from 'next/link'
export default function Navbar() {
return (
<nav className="bg-blue-600 text-white px-6 py-4 flex items-center justify-between">
<span className="font-bold text-xl">My App</span>
<div className="flex gap-6">
<Link href="/" className="hover:text-blue-200">ホーム</Link>
<Link href="/about" className="hover:text-blue-200">About</Link>
</div>
</nav>
)
}ステップ3: レスポンシブデザイン
Tailwind ではブレークポイントプレフィックスで画面サイズに応じたスタイルを書けます。
| プレフィックス | 対象画面幅 |
|---|---|
| なし | すべて（モバイルファースト） |
sm: | 640px以上 |
md: | 768px以上 |
lg: | 1024px以上 |
{/* モバイルでは1列、md以上では3列 */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card title="カード1" description="説明1" />
<Card title="カード2" description="説明2" />
<Card title="カード3" description="説明3" />
</div>確認しよう
- Tailwind CSS をインストールしてセットアップできた
-
p-,m-,text-,bg-などのクラスを使えた - flex で横並びのレイアウトを作れた
-
md:プレフィックスでレスポンシブ対応できた
AIに聞いてみよう
「Tailwind CSSでホバー時のスタイルやダークモードを設定するにはどうしますか？」
次のステップ
Last updated on