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

Last updated at 2025-04-25Posted at 2025-04-25

はじめに

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

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

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

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

TailwindCSS の概要

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

TailwindCSS の使い方

TailWindを使って以下の画面を作成していきます！

準備：TailWIndCSSの導入

１. TailwindCSS のインストール

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

２. tailwind.config.js の設定

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#1E40AF",
        secondary: "#9333EA",
      },
    },
  },
  plugins: [],
};

３. グローバル CSS にディレクティブを追加（src/index.css）

@tailwind base;
@tailwind components;
@tailwind utilities;

実践：コンポーネント設計のパターン

Button コンポーネント

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 コンポーネント

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:）・シャドウ／ラウンドコーナー活用

フォーム部品

１. プラグイン導入

npm install @tailwindcss/forms

２. tailwind.config.js に追加

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

３. Input コンポーネント例

// 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 class="dark">
  <body class="bg-white dark:bg-gray-800">
    <div class="text-gray-900 dark:text-gray-100">Hello</div>
  </body>
</html>

ダークモードにすると画面は以下のような画面になります。
なんかかっこいいですよね！！

プラグイン導入例

`@tailwindcss/typography`（公告文とか記事向け）

１. インストール

npm install -D @tailwindcss/typography

２. 設定 (tailwind.config.js に追加)

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

３. 使い方

<article class="prose lg:prose-xl dark:prose-invert">
  <h1>見出し</h1>
  <p>ここは本文。見出しやリスト、コードブロックがいい感じに整形されます。</p>
</article>

prose クラスを付けるだけで、マージンやフォントサイズ、リストなどが自動でキレイに！

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

まとめと今後の展望

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