在 dev 中预构建所有（包括未使用的）tailwind 类

Question

我想立即使用开发中的纱线构建所有顺风类，因此我将它们全部预先构建。

为什么？

我的问题是这样的：

我正在我的 Laravel 项目中尽我所能地“做前端”，并且正在尝试 Tailwind 中的所有这些不同的类。在我看来，只有项目中使用的顺风类才构建在yarn run（或开始时yarn watch）。当我活跃时，这会导致问题yarn watch。由于yarn watch只监视我的 scss 文件，而不监视我的刀片，因此当我向刀片文件添加新颖的顺风类时，它不会触发构建。因此，每次使用小说类时，我都需要手动关闭手表并重新启动它。

我正在掌握的一个解决方案是，在开发中预先构建每个顺风类，甚至是迄今为止未使用的类。怎么可能呢？

Answer 1

使用safelisttailwind.config.js 文件中的选项。该选项旨在生成类，即使在content该配置文件的路径中列出的 html 文件中找不到这些类。有趣的是，它safelist接受正则表达式模式，因此您只需输入.*即可获得所有内容。

我刚刚尝试过，它似乎有效。生成的 css 文件长 45,292 行，包含我见过的每个 tailwind 类。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  safelist: [
    {
      pattern: /.*/
    }
  ]
}