Tailwindcss3をcreate react appで動かすための設定【応急処置】

2021年12月にTailwindcss3がリリースされましたので、Electron + create react appで作っているアプリに導入してみました。

Tailwindcss3になったことで、create react appへの導入はかなり楽になったようです。

バージョン2では、PostCSSとautoprefixerの特定のバージョンが必要だったり、PostCSSの設定を上書きするためにCRACOが必要だったり、CRACOを動かすために起動スクリプトを変更したり、craco.config.jsをいじったりしたり、かなり面倒でした。

バージョン3は、かなりスッキリインストールできるようになっています。

ですが、公式手順に沿ってインストールしましたが、Electronと併用しているのでbild時の不適合か何かでTailwindcssが書き出されない事態に。

Tailwindcss3はまだリリースされたばかりであまり情報がなく、応急処置的に動かすことができましたので、メモしておきます。

Tailwindcssを単体で実行

Tailwindcssがプロジェクトにインストールされている状態で、プロジェクトで下記コマンドを実行するとファイルが変更される度にTailwindcssが実行されcssファイルが書き出されます。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

input.cssには下記内容を書いているだけ。

このコマンドは実行できるのが確認でき、output.cssにしっかり書き出されているのが確認できました。

後はアプリでoutput.cssを読み込むだけ。

これだと開発時に、アプリの開発環境実行とTailwindcssの実行をしなければならず、めんどうなのでconcurrentlyを使ってpackage.jsonに追加しました。

 "scripts": {
...
    "electron:dev": "concurrently \"npm run start\"  \"npx tailwindcss -i ./src/asset/tailwindcss.css -o ./src/asset/index.css --watch\" ",
...
  },

これで期待通りの動きになったのでとりあえずよしとします。

おわりに

Tailwindcssは以前から興味がありましたが、バージョン3が出るということで、リリースされてから試そうと思っていたので、試してみました。

clasが長くなったり、使いたいクラスを調べるのが面倒ですが、CSSファイルを行ったり来たりしなくてよいのは良いかなと思います。

Tableのスタイリングは地獄でしたがw