経験知ロゴ

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

tailwindcss

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

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

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

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

↓バージョン2のインストール手順
Install Tailwind CSS with Create React App – Tailwind CSS

↓バージョン3のインストール手順
Install Tailwind CSS with Create React App – Tailwind CSS

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

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

Tailwindcssを単体で実行

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

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;

このコマンドは実行できるのが確認でき、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

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから