Tailwind css在清除后不会减小文件大小

Question

我有一个基本的html文件(index.html(，我的项目结构如下：

• index.html
• 顺风.图.js
• postcs.js
• 顺风.css
• dist.css

以及此处每个文件的内容

module.exports = {
purge: {
enabled:true,
content:['./*.html', './**/*.html'],
layers: ['components']
},
theme: {
extend: {
fontSize:{
'small' : '.6rem',
// Or with a default line-height as well
'3xl': ['2.5rem', {
lineHeight: '50px',
}],
'6xl': ['3.70rem', {
lineHeight: '60px',
}],
},
colors:{
transparent: 'transparent',
current: 'currentColor',
orange:{
DEFAULT: '#F47521'
}
},
screens: {
'sm': '640px',
'md': '760px',
'custom' : '980px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1600px',
'xxl' : '1700px'
}
}
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'visited'],
},
plugins: [
({addUtilities}) => {
const utils = {
'.translate-x-half': {
transform: 'translateX(50%)',
},
};
addUtilities(utils, ['responsive'])
}
]
};

后处理文件

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

和我的包.json

{
"name": "myproject",
"version": "1.0.0",
"description": "my theme",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o dist.css",
"build:css": "postcss tailwind.css -o dist.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.8",
"tailwindcss": "^2.0.4"
},
"dependencies": {
"cssnano": "^4.1.10",
"postcss-cli": "^8.3.1"
}
}

当使用：npm运行构建时，顺风构建项目，但dist.css大小保持为5.7MB

我在这里做错了什么？

谢谢

Answer 1

您已将清除配置为应用于"components"层。

顺风有三层："基础"、"组件"one_answers"公用设施"。组件是三个组件中最小的，因此它对生成的文件大小的影响将相当小。达到5.7MB是因为到目前为止最大的一层"实用程序"被忽略了。

更新清除配置以应用于公用程序。除非有充分的理由对层进行选择性，否则你可能想放弃任何特异性，让它适用于所有层。

此外，如果您遗漏了enabled，它将根据您的NODE_ENV设置自动处理。

https://tailwindcss.com/docs/optimizing-for-production#purging-特定层