Tailwind CSS v4の@tailwindcss/postcssで重複minifyを避ける設定方法
目次
1. はじめに
このブログでは、Tailwind CSS + PostCSSプラグインを使っています 。当初は、以下のドキュメントのように、シンプルなpostcss.config.mjsでした。
Installing Tailwind CSS with PostCSS - Tailwind CSS
しかし、このpostcss.config.mjsでは、Tailwind CSSとcssnanoの両方でminifyが実行され、予期しない重複処理が発生していることに気付きました。具体的には、production環境で@tailwindcss/postcssが自動的にoptimizeを有効にするため、その後のcssnanoと処理が重複してしまいます。
project/postcss.config.mjs
export default {
plugins: {
'postcss-import': {},
'@tailwindcss/postcss': {},
'postcss-discard-comments': {removeAll: true},
...(process.env.NODE_ENV === 'production' ? {
'cssnano': {preset: 'default'},
} : {}),
},
};2. PostCSSプラグインの引数について
コードを確認したら、以下のような実装になっていました。
@tailwindcss-postcss/src/index.ts
export type PluginOptions = {
// The base directory to scan for class candidates.
base?: string
// Optimize and minify the output CSS.
optimize?: boolean | { minify?: boolean }
}以下のコードを見ると、let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'とあります。これは、明示的にoptimizeオプションが指定されていない場合、NODE_ENVがproductionのときに自動的にoptimizeが有効になることを意味します。
@tailwindcss-postcss/src/index.ts
function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
let base = opts.base ?? process.cwd()
let optimize = opts.optimize ?? process.env.NODE_ENV === 'production'たとえば、以下のようにスクリプトでNODE_ENV=productionとすると、optimizeはtrueになります。
project/package.json
{
"scripts": {
"build:11ty": "npx eleventy",
"serve:11ty": "npx eleventy --serve",
"build:postcss": "NODE_ENV=production postcss src/assets/css/main.css -o src/assets/css/main.min.css",
"watch:postcss": "NODE_ENV=development postcss src/assets/css/main.css -o src/assets/css/main.min.css --watch",
"build": "npm run build:postcss && npm run build:11ty"
}
}上記のpostcss.config.mjsの場合、Tailwind CSSでoptimizeし、その後cssnanoでもminifyする。ということになります。
3. 解決方法
私の現在の環境だと、Tailwind CSSのoptimizeは不要ですので、設定を変更し、無効にしました。
project/postcss.config.mjs
export default {
plugins: {
'postcss-import': {},
'@tailwindcss/postcss': {
minify: false,
optimize: false,
},
'postcss-discard-comments': {removeAll: true},
...(process.env.NODE_ENV === 'production' ? {
'cssnano': {preset: 'default'},
} : {}),
},
};この設定でcssnanoがminifyを担当することになり、想定した通りのスクリプトになりました。
私は、Tailwind CSS v4から使い始めたので、今までのv3以前の挙動は分かっておりませんでしたが、v3から使っている開発者には既知のことかもしれません。
4. まとめ
リポジトリのコードを確認する方が確実ですね。
