时间戳

首页 > 解决方案 > Tailwind 的 JIT 模式在 Next JS 的本地主机预览中不起作用

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

问题描述

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

解决方案

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

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

推荐阅读