Tailwind CSS の基本と `className` が長くなるときの対処法

🎨 Tailwind CSS でよく使う基本クラス

Tailwind CSS はユーティリティファーストの CSS フレームワークで、以下のようなクラスを基本的に使用します。

1. レイアウト関連

Flexbox & Grid

flex, flex-row, flex-col, justify-center, items-center
grid, grid-cols-3, gap-4

幅と高さ

w-1/2, h-64, max-w-screen-lg, min-h-screen

余白 (Margin & Padding)
```
m-4, mx-auto, p-2, py-6
```

2. 色と背景

テキストカラー

text-gray-700, text-blue-500, text-white

背景色

bg-gray-100, bg-blue-600, bg-gradient-to-r

ボーダーとシャドウ

border, border-gray-300, shadow-lg, rounded-lg

3. トランジションとホバー

アニメーション効果
```
transition, duration-300, ease-in-out
```
ホバー時のエフェクト
```
hover:bg-blue-700, hover:shadow-xl
```

📝 `className` が長くなるときの対処法

Tailwind は便利ですが、クラスが増えると className が長くなり、可読性が低下します。そこで、整理する方法を紹介します。

✅ 1. `clsx` や `classnames` を使う（推奨）

インストール

npm install clsx
# または
npm install classnames

使用例（clsx）

import clsx from "clsx";

const buttonClass = clsx(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  "disabled:bg-gray-400"
);

<button className={buttonClass}>Click Me</button>;

classnames を使う場合

import classNames from "classnames";

const buttonClass = classNames(
  "px-4 py-2 rounded-lg transition duration-300",
  "bg-blue-500 text-white hover:bg-blue-700",
  { "disabled:bg-gray-400": true }
);

<button className={buttonClass}>Click Me</button>;

✅ 2. Tailwind の `@apply` を使う

CSS ファイルに定義

/* styles/globals.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 hover:bg-blue-700;
}

コンポーネントで使用

<button className="btn-primary">Click Me</button>

✅ 3. `const` にクラスを格納

const buttonStyles =
  "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition duration-300";

<button className={buttonStyles}>Click Me</button>;

✅ 4. `variants` パターン（ユーティリティ関数）

const buttonClass = (type: "primary" | "secondary") =>
  clsx(
    "px-4 py-2 rounded-lg transition duration-300",
    type === "primary"
      ? "bg-blue-500 text-white hover:bg-blue-700"
      : "bg-gray-300 text-black hover:bg-gray-400"
  );

<button className={buttonClass("primary")}>Primary</button>;
<button className={buttonClass("secondary")}>Secondary</button>;

まとめ

方法	使いやすさ	メリット
`clsx` / `classnames`	⭐⭐⭐	条件付きクラス適用、可読性向上
`@apply`	⭐⭐⭐	スタイルの再利用
`const` に格納	⭐⭐	シンプルで管理しやすい
`variants` 関数	⭐⭐⭐	柔軟にカスタマイズ可能

おすすめの方法

条件付きクラス → clsx or classnames
再利用を考える → @apply
シンプルに整理 → const に格納
柔軟にカスタマイズ → 関数 (variants パターン)

Tailwind を活かしつつ、可読性を上げる方法を選んで使おう！🚀