ReactにTailwind CSSを導入する
ReactReact のコンポーネントと 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 ファイルが追加されます。
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は、構造と見た目、という関係でした。
- App.js:構造を記述
- App.css:見た目を記述
一方、Reactは、以下のように構造をコンポーネントに分割します。
- App.js
- Title.js:タイトルの構造
- Title.css:タイトルの見た目
- Honbun.js:本文の構造
- Honbun.css:本文の見た目
- Button.js:ボタンの構造
- Button.css:ボタンの見た目
コンポーネントは単体の機能、つまり出来るだけ小さい単位に分割するようにします。そうすることで、他で再利用が可能になります。すると、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のメリットについて紹介しました。