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

【问题标题】：JIT mode for Tailwind not working in localhost preview in Next JSTailwind 的 JIT 模式在 Next JS 的本地主机预览中不起作用
【发布时间】：2021-10-19 09:01:47
【问题描述】：

我正在构建一个 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.

任何想法可能导致这种情况？谢谢！

【问题讨论】：

我第一次升级到 Next.js 11 和 TailwindCSS v2 时遇到了同样的问题。 JIT 模式在本地主机上不起作用，但生产很好。我已经在 Tailwind Repo 上打开了讨论（我认为这是新 Tailwind 的一个错误），但没有人得到相同的结果。我认为这是来自 localhost 的环境（不清楚或其他什么）。最后，我不得不切换到 Codespace 直到现在。希望任何人都能找到帮助我们的解决方案。
我也遇到了这个问题.. 还没有解决方案。 ->> "tailwindcss": "^2.2.7",

标签： next.js tailwind-css jit

【解决方案1】：

在 Nuxtjs 中，我添加了：

@import url('tailwindcss/dist/tailwind.min.css');

归档：~/assets/css/tailwind.css

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

解决了这个问题，只需在 tailwind.config.js 文件中编辑 'purge' 属性，添加正确的路径，如下所示 './public//*.html', './src//*.{js,jsx,ts,tsx,vue}',

你可以走了。

【讨论】：

【解决方案4】：

看看这个https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files

您还可以将TAILWIND_MODE=watch 添加到您的 .env 文件中。

我希望它可以工作，因为当我删除它时，我也面临同样的错误。

这个警告很好。这只是一条消息

【讨论】：

【解决方案5】：

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

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

【讨论】：