CreateReactAppでTailwindを使用する

2020年5月23日

Tailwindはutility-firstを掲げるCSS frameworkです。Bootstrapやfoundation、Material UIなどは、使いやすく多機能なデザイン付きコンポネントが用意されていて、それをベースにそのまま、あるいは用途に合わせデザインを上書きして使います。

Tailwindは出来上がったデザイン付きコンポネントはなく、デザイン付きコンポネントを作り上げる手助けをしてくれます。非常に細かく提供されたclassがあり、cssだけでは面倒になる部分(テーマのような共通の設定など)の手助けをしてくれます。

Component Examples

<input
  class="bg-white focus:outline-none focus:shadow-outliborderborder-gray-300 rounded-lg py-2 px-4 block w-fuappearance-noneleading-normal"
  type="email"
  placeholder="[email protected]"
></input>

Tailwindでデザインを当てていくのは使い方の把握を含め大変です。ただ、作った後に必要な情報を増減するのは楽だと思います。cssで作り込まれたデザインを、あとから上書きしていく大変さに涙した人も多いはずです。このボタンだけちょっと広げる、ここだけ色が少し、このパターンだけ、やってみたら思わぬところのデザインが崩れている・・・。

JavaScript界隈では、css moduleやstyled-componets、emotionといった方向性もあります。ただ、デザイナーとの共同作業の場合はまだまだcssが便利で、cssなので使い方自体の学習コストは低めです。試してみる価値は十分にあリます。

CreateReactAppでプロジェクト作成

いつものReactの環境をCreateReactAppで作成し、tailwindcssを導入します。お試しならpublic/index.htmlにtailwindのCDNを読み込むのが一番簡単です。今回はCDNは読み込みません。

yarn create react-app my-app
cd my-app

yarn add tailwindcss

tailwindのセットアップ

Installation

tailwindはデザイン全てを展開するのではなく、必要なものだけを最終的にcssに書き出す方式です。まず書き出し前のファイルを作成、tailwind.cssとします。

├── src
│   ├── App.css
│   ├── App.js
│   └── styles
│       └── tailwind.css

ファイル階層は自由です。この記事では上記のようにsrc配下にstylesフォルダを作成し、cssを配置します。

tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

cssを書き出す

一度buildできるか確認します。

yarn tailwindcss build src/styles/tailwind.css -o src/styles/index.css

成功すると、index.cssが作成されcssの設定が展開されているはずです。

│   └── styles
│       ├── index.css
│       └── tailwind.css

これでtailwindの機能を全て使うことができます。次にプロジェクトで使用していないcss classはbuild時にファイルに含めないようにします。

Controlling File Size

Postcssの設定

参考：Setting Up Tailwind CSS In A React Project

CreateReactAppをejectしている場合は、webpackやpostcssの設定を変更します。ejectしていない場合はpostcss-cliを入れます。

yarn add -D postcss-cli autoprefixer

package.jsonと同じ階層にpostcss.config.jsを作成します。

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')]
};

package.jsonに次の項目を追記

 "scripts": {
    "start": "yarn build:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

tailwind.config.jsの作成

下記のコマンドでtailwind.config.jsが書き出されます。直接作成しても問題ありません。

yarn tailwindcss init

// tailwind.config.js
module.exports = {
  purge: ['./build/index.html', './src/**/*.js'],
  theme: {},
  variants: {},
  plugins: []
};

この設定でNODE_ENVがproductionの時のみ、normalize設定を除き未使用のcss classが書き出されなくなります。package.jsonのbuildを修正します。

  "build": "NODE_ENV=production yarn build:css && react-scripts build",

yarn buildしてbuild/static/css内のcssファイル容量が非常に小さくなっているはずです(styles/index.cssのファイルサイズではないです、これは開発に使っているものなので1.5MBくらいあります)。

開発時は全てのcss classを展開して作業し、build時だけ未使用classを含めない使い方が推奨されています。

Tailwindは他のサイトの情報を参考にしやすい

自分で一から考えるより、作り込まれたコンポネントから不必要な情報を減らしていく方が作りやすいです。Tailwindで作成した色々なデザインを公開しているサイトもあります。

tailwind components

Tailwindの世界観は触っていて心地良く、Reactで使ってもかなり魅力的だと思います。ただ、antdなどと比較すると機能を持ったコンポネントは提供してくれないので、デザイン以外の部分は別途考える必要があります。

styled-componentsなどCSS in JS系に、良いんだけど何か少し引っかかる違和感を感じていたので、しばらくはTailwindを触っていくつもりです。