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 将为空。将您的清除条目替换为以下内容：

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

Answer 2

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

您还可以将

TAILWIND_MODE=watch

添加到您的 .env 文件中。

我希望它能起作用，因为当我删除它时，我也面临同样的错误。

这个警告没问题。这只是一条消息

Answer 3

我也有同样的问题， 删除所有内联顺风类并将它们放入带有

@apply

的 CSS 文件中后，它就可以正常工作了。

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

Answer 4

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

你就可以开始了。

Answer 5

在 Nuxtjs 中，我添加了：

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

进入文件：

~/assets/css/tailwind.css

Answer 6

检查你的CSS，如果你的CSS文件中有

@charset "UTF-8";

，Tailwind可能会死掉

Answer 7

在我的情况下，顺风不是问题 - 事实证明我的一个组件由于计时器而发生了内存泄漏。

在完全独立的页面/组件上测试顺风，看看热刷新是否有效。如果它在一个页面上运行而不是在另一个页面上运行 - 您很可能存在内存泄漏。

Answer 8

尝试从清除链接上取下支架。这就是为我解决的问题。

从此：

purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]

对此：

purge: ["./pages/**/*.js,ts,jsx,tsx", "./components/**/*.js,ts,jsx,tsx"]

Answer 9

就我而言，Turbopack 就是问题所在。我想尝试 Turbopack 并像这样添加它：

  "scripts": {
    "dev": "next dev --turbo"
  },

必须把它改回这个

  "scripts": {
    "dev": "next dev"
  },

希望这有帮助。