了解如何在 Laravel Mix 中使用 Tailwind 的 JIT 编译器

一夜之间，Adam Wathan 和 Tailwind Labs 团队发布了一个新的 JIT 编译器，它会在您编写模板时按需生成您的样式，而不是在初始构建时生成所有样式。

此编译器的主要优势是能够直接开始编写您的 Tailwind 驱动的 HTML，而无需构建整个 4MB+ 的 CSS 文件（以及 删除未使用的 CSS 以便稍后在生产中缩减其大小）。

#使用 Laravel Mix 配置

作为一个主要使用 Laravel 的开发人员，我习惯了 Laravel Mix，我想看看如何让它与 Laravel Mix 一起使用，并且很高兴地发现它 a) 相当简单，而且 b) Just Works™️^*

首先，使用 NPM 安装 JIT 编译器。

npm install -D @tailwindcss/jit tailwindcss postcss

接下来，确保您的 tailwind.config.js 文件已设置为监视您的模板文件

// tailwind.config.js
module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

然后，指示 Mix 使用 JIT 编译器

// webpack.mix.js
const mix = require("laravel-mix");
 
mix.postCss("resources/css/app.css", "public/css").options({
  postCss: [
    require("@tailwindcss/jit"),
  ],
});

最后，启动 Laravel Mix 监视器

npx mix watch

#注意事项

#与 postcss-import 一起使用

如果您在 CSS 文件中使用 @import 语句（也就是说，如果您使用的是类似于 Webpacker 的东西来处理 Rails），那么您还需要包含 postcss-import 插件

mix.postCss("resources/css/app.css", "public/css").options({
    postCss: [
        require("@tailwindcss/jit"),
+       require("postcss-import"),
    ],
});

#增量更改

您可能（像我一样）注意到使用 JIT 编译器会在监视器运行时附加类 - 即使您删除了它们。

正如 Robin 所说，这样做是为了在开发过程中保持类的缓存纯粹地增量。这意味着，如果您使用一个类，然后删除它，然后再次使用它，JIT 编译器的性能可以保持相当快。

这在开发期间不会导致任何问题，重启监视器（npx mix watch）将重新编译整个 CSS 文件，其中只包含实际使用的类。

也就是说，请记住在部署时使用 npx mix --production 运行生产构建，以确保您的最终 CSS 文件尽可能小。

#准备就绪

在 Mix 监视器运行时，每次您保存对 purge-watchd 文件的更改时，JIT 编译器都会重新生成您的 public/css/app.css 文件，其中只包含您在这些文件中使用的 Tailwind 类。

这确保了您的项目只包含实际使用的类，并且会从一开始就将编译后的 CSS 文件的大小控制在较小的范围内。

^* 请注意，在撰写本文时，似乎存在一个与 前缀样式和否定类 相关的编译问题，因此如果您在生成的样式中使用前缀，请务必注意这一点。