React × TailwindCSS 入門：ユーティリティファーストで高速開発

## はじめに

今回初めて TailwindCSS に触ってみたんですが、タグにユーティリティクラスをペタペタ貼るだけでサクサクスタイリングできる感覚が想像以上に楽しくて、「もっと早く知っておけばよかった…！」って素直に思いました。しかも JIT モードとパージ機能で最終ビルドがめちゃ軽いし、無駄な CSS をバッサリ削ってくれるからコードもスッキリ保てるのが最高です！

この記事は、**TailwindCSS 初心者～中級者の React 開発者** 向けに、

- 今さら聞けない！TailwindCSS の概要
- React プロジェクトへのサクッと導入ステップ  
- 実際に手を動かして覚えるコンポーネント開発

をお届けします。**React で Tailwind を使い倒して、動くコンポーネントをガンガン作ってみよう！**  
ちなみに Angular でもバッチリ動くらしいので、そちらのプロジェクトで試してみたい人もぜひ参考にしてくださいね😊  

---

## TailwindCSS の概要
- **ユーティリティファーストの思想**  
- **メリット**  
  - クラス名で即レイアウト調整  
  - 再利用性向上  
  - ビルドサイズ最適化（JIT）  
- **デメリット**  
  - クラス名の煩雑化  
  - 慣れが必要  

---

## :star:TailwindCSS の使い方:star:
TailWindを使って以下の画面を作成していきます！
![TailWind_lite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3966447/4fa56025-5f94-475d-bf68-af546c1ab9f3.png)

### :shamrock:準備：TailWIndCSSの導入:shamrock:
１. TailwindCSS のインストール

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js の設定
```

２. tailwind.config.js の設定
```javascript
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#1E40AF",
        secondary: "#9333EA",
      },
    },
  },
  plugins: [],
};
```
３. グローバル CSS にディレクティブを追加（src/index.css）

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### :sunny:実践：コンポーネント設計のパターン:sunny:
#### Button コンポーネント
```tsx
import clsx from "clsx";
import React from "react";

type ButtonProps = {
  variant?: "primary" | "secondary";
  children: React.ReactNode;
};

export const Button: React.FC<ButtonProps> = ({
  variant = "primary",
  children,
}) => {
  const base = "px-4 py-2 rounded-lg font-medium";
  const styles = {
    primary: "bg-primary text-white hover:bg-primary/90",
    secondary: "bg-secondary text-white hover:bg-secondary/90",
  };

  return <button className={clsx(base, styles[variant])}>{children}</button>;
};

```
#### Card コンポーネント
```tsx
import React from "react";

type CardProps = {
  title: string;
  children: React.ReactNode;
};

export const Card: React.FC<CardProps> = ({ title, children }) => (
  <div className="p-6 bg-white rounded-2xl shadow-md sm:p-8 dark:bg-gray-600">
    <h2 className="text-xl font-semibold mb-4 dark:text-white">{title}</h2>
    <div>{children}</div>
  </div>
);

```
* ポイント：レスポンシブ対応（sm: / md: / lg:）・シャドウ／ラウンドコーナー活用

#### フォーム部品
１. プラグイン導入

```bash
npm install @tailwindcss/forms
```
２. tailwind.config.js に追加

```javascript
plugins: [require("@tailwindcss/forms")],
```

３. Input コンポーネント例
```tsx
// src/components/Input.tsx
import React from "react";

export const Input: React.FC<
  React.InputHTMLAttributes<HTMLInputElement>
> = (props) => (
  <input
    {...props}
    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-primary focus:border-primary dark:bg-gray-500 dark:text-white dark:placeholder-white"
  />
);
```
## カスタマイズ＆拡張
* ダークモード対応も簡単にできます！

```html
<html class="dark">
  <body class="bg-white dark:bg-gray-800">
    <div class="text-gray-900 dark:text-gray-100">Hello</div>
  </body>
</html>
```
ダークモードにすると画面は以下のような画面になります。
なんかかっこいいですよね！！
![TailWind_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3966447/5fb19bd8-7714-4a14-8311-ed64fcd42be1.png)


### プラグイン導入例

#### :shaved_ice:`@tailwindcss/typography`（公告文とか記事向け）:shaved_ice:
１. **インストール**  
   ```bash
   npm install -D @tailwindcss/typography
   ```
２. 設定 (tailwind.config.js に追加)

```javascript
module.exports = {
  // …既存設定…
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
```
３. 使い方

```html
<article class="prose lg:prose-xl dark:prose-invert">
  <h1>見出し</h1>
  <p>ここは本文。見出しやリスト、コードブロックがいい感じに整形されます。</p>
</article>
```
prose クラスを付けるだけで、マージンやフォントサイズ、リストなどが自動でキレイに！

ダークモード時は dark:prose-invert でテキストが白くなります。


## まとめと今後の展望

Tailwind を使ってみて、タグひとつひとつにユーティリティクラスでスタイルをポンポン付けられるのが想像以上に楽！ 余計な CSS ファイルをいじる必要がなくて、開発がサクサク進みました :muscle:  
今回は React で試してみたけど、実は Angular でも Tailwind がしっかり動くらしいので、Angular プロジェクトでもぜったい使おうと思います！！
次はダークモードのトグルや、Typography プラグインを組み込んでみようかな…:thinking:

Tailwind のおかげで「書いて楽しい」「動かして気持ちいい」フロントエンド開発ライフが始まります！ぜひ一度、手を動かして体感してみてくださいね:blush:


### 参考リンク

* [TailwindCSS 公式ドキュメント](https://v2.tailwindcss.com/docs)