@wordpress/scriptsを使ったプラグイン開発でTailwindCSSを使う手順

@wordpress/scriptsを使ってWordPresのプラグイン開発をしています。

Reactを使っているし、話題のTailwindCSSを導入してみましたので、その過程をメモします。

TailwindCSSの導入

開発しているプラグインのフォルダに移動し、下記コマンドでTailwindCSSをインストール。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

TailwindCSSのサイトには、TailwindCSSの他にPostCSSとautoprefixerをインストールするように書かれていますが、@wordpress/scriptsにはすでに両方入っているのでTailwindCSSだけでOK。

postcss.config.jsを作成し、下記内容を書く。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

下記コマンドを使ってtailwind.config.jsを作成。

npx tailwindcss init

tailwindcssを使いたい場所にimport。

この状態で、下記コマンドでwp-scriptを実行すると、buildフォルダ内のmain.cssにTailwindCSSがズラッと追加されている。

npm run start

wp-scriptにより、ファイルが更新されると自動でリビルドしてくれる。

tailwind.config.jsを編集しても自動でリビルドしてくれるので、個別に実行する手間が無いのは良いが、tailwind.config.js編集後のコンパイルは少し時間がかかる。

最適化する

素のTailwindCSSは3MB以上と巨大なので、本番環境では使用しているクラスのみを抽出する最適化をする必要がある。

tailwind.config.jsの「purge」に「enabled:true」を指定すると、その下の「content」で指定したファイルに使われているクラスのみを抽出してくれる。

module.exports = {
    purge: {
        enabled: true,
        content: [ './src/**/*.tsx' ],
    },
  …
}

開発中に「enabled:true」を設定すると、ファイル更新毎にTailwindCSSがコンパイルされて動作が重くなるので注意。

おわりに

意外と簡単に導入できてよかったです。