如何检查 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 包正在减少。如何查看？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

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

【讨论】：