如何检查 Tailwind 是不是真的清除了 CSS？

Posted 2023-03-06

【中文标题】如何检查 Tailwind 是不是真的清除了 CSS？

【英文标题】：How to check if Tailwind actually purges css?如何检查 Tailwind 是否真的清除了 CSS？

【发布时间】：2021-01-06 13:36:17

【问题描述】：

我有一个 gatsby 网站，我想减小 css 包的大小。我使用的是流行的插件 gatsby-plugin-purgecss，但即使配置了它也会破坏我的网站，而且最近 tailwind 似乎增加了对 purgecss 的直接支持：https://tailwindcss.com/docs/controlling-file-size

但是，当使用直接从顺风中清除的新方法时，我无法判断 css 是否正在被清除。

这是我的 tailwind.config.js

module.exports = 
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ],
  future: 
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  ,
  theme: 
    extend: 
      backgroundColor: 
        primary: 'var(--color-bg-primary)',
      ,
    ,
  ,
  variants: ,
  plugins: [],
;

当我运行 gatsby build && gatsby serve 时，终端中没有任何内容表明 css 包正在减少。如何查看？

【参考方案1】：

您可以在首选浏览器的开发者工具中查看 css 文件的大小。

打开开发者工具 切换到网络标签 按 CSS 过滤 重新加载网站 将鼠标悬停在尺寸列上