ReactにTailwind CSSを導入する

React のコンポーネントと Tailwind CSS はとても相性が良いです。
実際に React で開発をしてみて、その良さを感じましたので、Tailwind CSS の導入方法とそのメリットを紹介します。

Tailwind CSS の導入方法

以下の3つの手順でReactにTailwindを導入できます。

以下の公式サイトの導入方法が参考になります。

1. npm でインストールする

まず、Reactプロジェクト直下で、以下のコマンドでTailwindをインストールします。

% npm install -D tailwindcss postcss autoprefixer
% npx tailwindcss init -p

正しくインストールが完了すると以下のようにReactプロジェクトに tailwind.config.js と postcss.config.css ファイルが追加されます。

tailwind.config.js と postcss.config.js が追加

2. tailwind.config.js を修正する

生成された tailwind.config.js の content の部分を以下のように修正します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. index.css に tailwind を指定する

index.css に以下を記述します。

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

これでReactにTailwindの導入は完了です。

Reactにcssを適用させる

次に、TailwindでReactコンポーネントにcssを適用させてみます。

この記事では、以下のような「タイトル・本文・ボタン」で構成されるページのスタイル指定を、CSSをそのまま使うケースとTailwindCSSを使うケースで比較してみます。

この表示のスタイル指定を比較する

cssをそのまま使用するケース

css をそのまま適用するケースでは、JavaScriptファイルとは別のCSSファイルを用意して、それぞれ以下のように書きます。

import "./App.css";

function App() {
  return (
    <div className="article">
      <h1 className="title">これはタイトルです。</h1>
      <p className="honbun">
        これは本文です。<br />
        今日の天気は晴れです。<br />
        昨日の天気は雨でした。<br />
        一昨日の天気は雷でした。<br />
        明日の天気は曇りの予報です。
      </p>
      <button className="ok-button">OK</button>
    </div>
  );
}
.article {
  margin: 5rem;
}

h1.title {
  margin-bottom: 2.5rem;
  font-size: x-large;
  font-weight: 700;
}

p.honbun {
  margin-bottom: 2.5rem;
  color: gray;
}

Button.ok-button {
  background-color: aquamarine;
  padding: 0.5rem 1.5rem;
}

Tailwind CSSを使用するケース

Tailwindを使用する場合は、以下のような記述になります。

function App() {
  return (
    <div className="m-20">
      <h1 className="mb-10 text-xl font-bold">これはタイトルです。</h1>
      <p className="mb-10 text-gray-500">
        これは本文です。<br />
        今日の天気は晴れです。<br />
        昨日の天気は雨でした。<br />
        一昨日の天気は雷でした。<br />
        明日の天気は曇りの予報です。
      </p>
      <button className="px-6 py-2 bg-green-300">OK</button>
    </div>
  );
}

tailwind CSSを使うと、cssファイルを作成する必要がなく、jsファイルに直接スタイルを書き込むことができます。

デメリット:jsファイルの中身が冗長になってしまう

デメリットの1つ目は、classNameでスタイル1つ1つを指定するため jsファイルの中身が冗長になります。

// CSSをそのまま適用させるとシンプルに記載できる
<h1 class="title">これはタイトルです</h1>

// Tailwind CSSだと直接JSに書き込めるけど、見通しが悪くなる
<h1 className="mb-10 text-xl font-bold">これはタイトルです</h1>

デメリット:重複する要素を増やすとスタイル指定も重複してしまう

タイトルやボタンなどの同じ要素を増やしたりすると、以下のようにスタイル指定の重複が生まれてしまいます。

function App() {
  return (
    <div className="m-20">
      <h1 className="mb-10 text-xl font-bold">これはタイトルです。</h1>
      <p className="mb-10 text-gray-500">
        これは本文です。<br />
        今日の天気は晴れです。<br />
        昨日の天気は雨でした。<br />
        一昨日の天気は雷でした。<br />
        明日の天気は曇りの予報です。
      </p>
      <button className="px-6 py-2 bg-green-300">キャンセル</button>
      <button className="px-6 py-2 bg-green-300">OK</button>
    </div>
  );
}

ReactコンポーネントにTailwind CSSを適用させる

jsファイルが冗長になる、スタイルの重複した記述が生まれる、といったtailwind CSSのデメリットを説明しましたが、Reactコンポーネントにtailwind CSSを適用させると、そのデメリットはほぼ無くなります。

以下のように、HTMLとCSSは、構造と見た目、という関係でした。

一方、Reactは、以下のように構造をコンポーネントに分割します。

コンポーネントは単体の機能、つまり出来るだけ小さい単位に分割するようにします。そうすることで、他で再利用が可能になります。すると、App.css でもともとスタイル定義していた .title や .honbun や .ok-button とコンポーネントが同じ単位になります。スタイルの共通化のために分離していたものが、構造も同じように分離されるようになります。

コンポーネントが小さい単位になってくると、見た目と構造に分けるメリットよりデメリットが優ってきます。同じ機能は同じ1つのファイルで記述するほうがシンプルになります。そこで、Tailwindが生きてくるようになります。

具体的には、タイトルは以下のようなコンポーネントとして分割されることになります。

function Title(props) {
  return (
    <>
      <h1 className="mb-10 text-xl font-bold">props.title</h1>
    </>
  );
}

これだけ小さい単位でコンポーネント化されると、わざわざCSSに分離する必要性がないですよね。

まとめ

ReactへTailwind CSSを導入する方法と、TailwindCSSのメリットについて紹介しました。