Tailwind CSSをReactに導入してみる

Reactを利用している際にTailwind CSSを利用する流れが発生したので導入方法を書いていきます。

Tailwind CSSとは

Tailwind CSSはCSSフレームワークの一つで比較的新しいフレームワークです。Tailwind CSSはユーティリティファースをと掲げており、便利で汎用的なクラスが用意されています。一時期、Twitterとかでも話題になってましたよね。

Reactや通常のHTML、Vueなどで使用することが可能です。

Tailwind CSSの最大のメリットはクラス名を決めなくていいこととCSSを新たに書く必要性がないです。

クラスを決めなくていい反面、クラスの組み合わせで成り立つためインラインに大量のクラスを書く必要性があることがデメリットになります。

ReactでTailwind CSSを使用

まずはCreate React Appで新しいプロジェクトを作成します。以下、Reactでの新しいプロジェクト作成方法を書いています。

あわせて読みたい

Reactを始めてみた フロントエンドとしてよく話題になっていたので学んでみることに。今までいた会社がjQueryをまだ推奨していることもあって個人的に脱却したいなという目標があります。 …

作成したプロジェクトにターミナルもしくはコマンドライン上から移動し、Tailwindと必要な依存関係をインストールします。

npm install -D tailwindcss postcss autoprefixer

CRACOをインストールする

CRACOとは

Create React App Configuration Overrideの略でざっくりいうとCreate React Appの場合、Tailwindの動作に必要なPostCSS（Node.js製のCSS変換ツール）を上書きすることができないため、使用します。

npm install @craco/craco

CRACOのインストールが終わったら、package.jsonファイルのスクリプトを上書きします。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },

上記の部分を変更。Reactの記述の3行分を cracoに変更する形です。

"scripts": {
    "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.jpファイルを生成します。ターミナルかコマンドラインで下記を打ちファイルを作成します。

npx tailwindcss-cli@latest init

万が一、エラーが出た場合はcraco.config.jsの「postcss」の記述を「postcssOptions」に変更して再度コマンドを打ってみてください。

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

  // tailwind.config.js

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

次にsrc/index.cssへ書きをコピペし、cssをインポートします。

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

最後に親のjs（index.js）に一行入力導入完了です。

import './index.css';

さいごに

今回まとめたのは、エラーが出たということもありますが、プロジェクトごとにtailwind cssを設定しないといけないため、理解するまですぐに確認できるようにという理由です。

新しいことでプロジェクトがなければ設定しないだろうし色々な本を調べたりネットを調べる時間がない時に限って扱うことになりかねないから恐ろしいです。