Tailwind 的 JIT 模式在 Next JS 的本地主机预览中不起作用

Question

我正在构建一个 Next JS 网站并使用 JIT 运行 Tailwind。这是我的 tailwind.config.js：

  module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  extend: {},
  plugins: [],
  };

问题是，每次我编写新代码时，我都必须重新启动服务器并运行“npm run dev”，因为它没有更新 http://localhost:3000/ 上的 CSS。

当我运行服务器时，我也会收到警告：

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

有什么想法可能导致这种情况吗？谢谢！

Answer 1

由于 JIT 模式通过扫描模板文件按需生成 CSS，因此您必须在tailwind.config.js文件中使用所有模板路径配置清除选项，否则您的 CSS 将被空的。将您的清除条目替换为以下内容：

\n

    purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],\n

\n

Answer 2

我遇到了同样的问题，删除所有内联顺风类并将它们放入 CSS 文件中后，@apply它就可以正常工作了。

也许 tailwind 在 Next 服务器渲染组件之前编译 CSS。