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

Posted 2023-03-06

【中文标题】清除后 Tailwind css 不会减小文件大小

【英文标题】：Tailwind css does not reduce file size after purge

【发布时间】：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

我在这里做错了什么？

谢谢

【参考方案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 文件输出会很小。

太好了，谢谢！我会继续在我的项目中尝试一下，看看效果如何。