Create React AppでTailwind CSSを導入する

こんにちは。株式会社インプルの下地です。

今回は、Create React AppでTailwind CSSを導入する流れについて簡単に紹介します。また、Tailwind CSSについても簡単に紹介していきます。

Tailwind CSSについて
Tailwind CSSのメリット・デメリット
Create React AppでTailwind CSSを導入
まとめ
1. 参考

Tailwind CSSについて

『Tailwind CSS』とは、カスタムデザインを迅速に構築するための、ユーティリティファーストのCSSフレームワークです。Tailwind CSSは、高度にカスタマイズ可能な低レベルのCSSフレームワークで、独自のデザインを構築するために必要なすべてのビルディングブロックを提供します。

https://tailwindcss.jp/

上記の文は、公式の英文を翻訳ツールで翻訳したものです。

ユーティリティファーストとは、提供されているクラスがフレームワークとしてあらかじめひと通り用意されており、基本的には新たにCSSを書かずともクラスを組み合わせていくだけでスタイリングが行えるというものです。

ユーティリティの例として、Bootstrap と比較してみます。Bootstrapでのボタンには、btnというクラスが用意されています。

<button type="button" class="btn btn-primary">Primary</button>

btn-primary というクラスの部分でボタンの色を指定しています。仮に btn-danger だと赤色に、btn-warningだと黄色になります。

一方の Tailwind CSS では、ボタンは次のように記述できます。

<button type="button"　class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
 Button text
</button>

それぞれのクラスは、それぞれほぼひとつのCSSプロパティと対応しています。

// 一例
.inline-flex {
  display: inline-flex;
}
.font-medium {
  font-weight: 500;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

それぞれが独立した小さいクラスだからこそ、組み合わせることで自由度の高いスタイリングを可能にしています。

Tailwind CSSのメリット・デメリット

Tailwind CSSのメリット・デメリットについて説明します。

まずはメリットを紹介します。

クラス名を決めなくて良い

決められたユーティリティクラスによってスタイリングしていくため、クラス名を決めてCSSを記述する必要がほとんどありません。

セマンティックな命名規則を目指すあまり、時間を取られるといった問題を解決してくれます。

CSSの記述量を減らすことが可能になる

TailwindCSSではCSSを新たに書く必要がないため、CSSファイルの数が膨大になり、管理が大変になるといったことが起きません。

従来のやり方だと、新たな機能を追加するたびにCSSファイルは大きくなってしまいます。

安全な変更が可能になる

HTMLクラスはローカルであるため、他の部分への影響を気にせずにクラスを変更することができます。

この部分のpaddingがズレているので直したら、別の場所がズレてしまった…といったことがありません。

次にデメリットについて紹介します。

学習コストがかかる

CSSプロパティ1つ1つにあたるクラスが提供されているとなると、その数は膨大です。

それらの用意されているクラスを覚える、または調べることにコストがかかってしまいます。

クラスが多くなる

小さいクラスを組み合わせることで自由度が高い、と言いましたが逆にクラスの記述が増えてしまうことにも繋がります。上記のボタンの例ではクラスが17個もあります。個人的にはインラインに大量のクラスは非常に見辛いと感じてしまいます。

一応、@applyメソッドというTailwindクラスをまとめて独自クラスを作ることができる機能があります。しかし、この機能に頼りすぎることはTailwind CSSのユーティリティファーストというコンセプトに反してしまいます。

メリット・デメリットもなんとなく理解したところで、Tailwind CSSを導入してみましょう！

Create React AppでTailwind CSSを導入

公式ドキュメントに従って導入していきます。

まずはCreate React Appで新しいプロジェクトを作成します。

プロジェクト名はmy-projectで作成します。

$ npx create-react-app my-project
$ cd my-project

次に、Tailwindと必要な依存関係をインストールします。

Create ReactAppはまだPostCSS8をサポートしていないため、今のところ(2021/12/11)ではTailwind CSS v2.0 PostCSS7互換性ビルドをインストールする必要があります。

$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

次に、CRACOをインストールします。

公式ドキュメントからの翻訳によると、

Create React AppではPostCSS構成をネイティブにオーバーライドできないため、Tailwindを構成できるようにするにはCRACOもインストールする必要があります。
https://tailwindcss.com/docs/guides/create-react-app

最初見た時は意味がわからなかったので調べました。要約すると、

PostCSSとは、Node.js製の「CSSツールを作るためのフレームワーク」
CSS を加工しやすいようにパース(構文解析)し、結果を CSS として出力する機能を提供するフレームワーク

そのPostCSSをオーバーライド(ある場所で定義された設定や手続き、属性などを、別の定義で上書きすること)ができないため、CRACOというライブラリを導入する必要がある、という事なんですね。

$ npm install @craco/craco

CRACOのインストールが終わったら、package.jsonファイルのスクリプトを更新して、ejectを除くすべてのスクリプトにreact-scriptsの代わりにcracoを使用します。

// package.json 
 {
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

次に、プロジェクトのルート直下にcraco.config.jsを作成し、tailwindcssとautoprefixerをPostCSSプラグインとして追加します。

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

次に、tailwind.config.jsファイルを生成します。

$ npx tailwindcss-cli@latest init

これで、プロジェクトのルート直下にtailwind.config.jsが作成されます。

Tailwindの構成の詳細については、構成ドキュメントを参照してください。

次に、Tailwind.config.jsにあるpurgeに使用するファイルの拡張子を指定します。

これにより、purge内で設定したファイルで使われているクラス以外がビルドされず、cssファイルのサイズを縮小することができます。

基本的には公式ドキュメントにある設定をコピペで大丈夫です。

  // tailwind.config.js

  module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
　　...
  }

次にcreate-react-app時に生成されている src/index.css へ下記をコピペし、src/index.js でcssファイルをimportします。

最上位コンポーネントである index.js でimportすることで全てのコンポーネントでtailwindを適用できるようになります。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

最後に、CSSファイルが./src/index.jsにインポートされていることを確認します。

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
+ import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

これでCreate React AppでTailwind CSSを導入完了です！

お疲れ様でした！