我有以下的邮政编码。配置。js文件:
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
以及以下tailwind.config.js文件:
// tailwind.config.js
module.exports = {
purge: [
'./src/cljs/foo/*.cljs',
'./target/cljs-runtime/*.js',
'./target/cljsbuild/public/js/*',
'./target/cljsbuild/public/js/cljs-runtime/*',
'./target/*'
],
theme: {},
variants: {},
plugins: [],
}
我的目标是压缩生成的css,为此我在tailwind中添加了purge键。配置。js。
要从. src顺风文件生成css,styles.src.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
我正在运行命令:
postcss ./resources/public/css/styles.src.css -o ./resources/public/css/styles.css
从包含两个tailwind的项目的根目录。配置。js和PostSS。配置。js。但是在运行该命令之后,生成的css是1.2MB,与我没有清除键时的大小一样大。为什么POSTSS清除不起作用?
您不需要使用postcss
的命令。
只需将启用:true
添加到顺风吹扫中即可。配置。json
并将您的路径包装到列表中,如中所述https://tailwindcss.com/docs/optimizing-for-production#enabling-手动:
purge: {
enabled: true,
content: [
'./src/cljs/foo/*.cljs',
'./target/cljs-runtime/*.js',
'./target/cljsbuild/public/js/*',
'./target/cljsbuild/public/js/cljs-runtime/*',
'./target/*'
],
},
它在那里!现在您可以运行并查看结果:
npm run build:css
这是我在包中使用的命令。json
:
"scripts": {
"build:css": "tailwind build static/css/tw.css -o static/css/tailwind.css"
},
您的POSTSS配置分为顺风。配置。js
和邮政编码。配置。js
,当它应该全部在postsss中时。配置。js
。
为什么?
Tailwind在幕后使用POSTSS。但是PostSS本身并不知道你的顺风。配置。js
文件。要使用postsss
命令,需要在postsss中指定
文件,而不是purge
选项。配置。js顺风。配置。js
。Tailwind网站上的这个页面详细解释了这两个文件之间的区别。
以下是我的设置:
// postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./src/cljs/foo/*.cljs',
'./target/cljs-runtime/*.js',
'./target/cljsbuild/public/js/*',
'./target/cljsbuild/public/js/cljs-runtime/*',
'./target/*'
],
// This extractor will tell PurgeCSS to ignore all CSS selectors and tags used in your files
defaultExtractor: content => Array.from(content.matchAll(/:?([A-Za-z0-9-_:]+)/g)).map(x => x[1]) || []
}),
]
}
注意我的tailwind.config.js文件是空的:
// tailwind.config.js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
你也可以在postcss.config.js
中添加清除键。
这是我在PostSS中的配置。配置。js
const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: ['./src/**/*.js', './public/index.html'],
// make sure css reset isnt removed on html and body
whitelist: ['html', 'body'],
// Include any special characters you're using in this regular expression
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
],
}
重要提示:环境变量NODE_ENV
负责开发和生产环境。如果在开发模式下使用tailwindcss,则不希望清除,因为您希望使用所有可用样式。通过将其设置为production
模式,将通知postsss
,从而清除未使用的css。
请注意,我没有在webpack配置中设置任何配置。
在构建时,请确保将您的NODE_ENV
设置为生产用例的特定值。您可以使用'生产'
或'prod'
都没关系。同样会反映在postcss.config.js.