Tailwind CSS の Purge でビルドサイズを縮小する

Tailwind CSS はユーティリティファーストでとても使いやすいのですが、無数のクラスが提供されているので、そのままだとビルドサイズがとても巨大ですよね。 それを解消するために、 Tailwind CSS に標準で搭載されている Purge オプションを使ってビルドサイズの縮小を試してみました。 テスト環境の構築 最初に Tailwind CSS の環境を構築します。 まず npm プロジェクトを作成して、Tailwind CSS を依存に追加します。

[kkeisuke]

“動的にクラス名の文字列を生成したい場合は、生成するクラス名を PurgeCSS のwhitelistオプションを指定して Purge 対象から除外することで対応が可能”