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

【问题标题】：Tailwind css does not reduce file size after purge清除后 Tailwind css 不会减小文件大小
【发布时间】：2021-06-26 18:49:55
【问题描述】：

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

index.html
tailwind.config.js
postcss.js
tailwind.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'])
    }
]
};

postcss 文件

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

还有我的 package.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 run build 构建时，顺风构建项目，但 dist.css 大小仍为 5.7MB

我在这里做错了什么？

谢谢

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

您已将清除配置为应用于“组件”层。

Tailwind 具有三层：“基础”、“组件”和“实用程序”。组件是三者中最小的，因此它对生成的文件大小的影响将相当小。您达到了 5.7MB，因为到目前为止最大的层“实用程序”被忽略了。

更新您的清除配置以应用到实用程序。除非有充分的理由选择层，否则您可能希望放弃任何特定性并允许它应用于所有层。

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

https://tailwindcss.com/docs/optimizing-for-production#purging-specific-layers

【讨论】：

嘿，“实用程序”你说得对，非常感谢
嗨内森。我是 Tailwind 的新手，正在阅读 Tailwind 对性能的潜在影响。我遇到了this SO thread。如果我正确清除，我还会遇到他们所指的缓慢刷新率吗？
@TommyWolheart 我对 CSS 了如指掌，但现在只要有可能，我都会使用 Tailwind。正确清除设置后，您的 CSS 文件输出会很小。
太好了，谢谢！我会继续在我的项目中尝试一下，看看效果如何。