Tailwindcss nextjs JIT模式编译报错

Posted 2023-03-07

【中文标题】Tailwindcss nextjs JIT模式编译报错

【英文标题】：Tailwindcss nextjs JIT mode compile error

【发布时间】：2021-10-08 18:27:06

【问题描述】：

我们正在使用 tailwindcss 制作一个项目，并且进展顺利，直到客户想要一个“像素完美”的设计，这意味着我们需要以像素而不是 rem 来设置每一件事。因此，我没有添加 1 个 gajillon 类，如 h-1px、h-2px ... h-100px 等。我决定启用 JIT 模式并改用 h-[100px]。 问题是编译器一直在编译，即使我什么也没改变，并且继续这样做，即使我停止开发服务器，一个进程正在端口 3000 上运行（我无法再次启动服务器，直到我停止它）。 所以..问题是如何停止这个无限循环的重新编译

我正在使用： 尾风css 2.1.2 tailwindcss/jit 0.1.18

我的 tw 配置暂时是这样，可能有什么东西触发了循环：

const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = 
  important: true,
  mode: "jit",
  //content: ["./src/**/*.js,ts,jsx,tsx,liquid"],
  purge: 
    enabled: false,
    content: [
      "./src/components/**/*.js,ts,jsx,tsx,html",
      "./src/pages/**/*.js,ts,jsx,tsx,html",
      "./src/components/*.js,ts,jsx,tsx,html",
      "./src/pages/*.js,ts,jsx,tsx,html",
      "./src/**/*.js,ts,jsx,tsx,html",
      "./src/*.js,ts,jsx,tsx,html",
      "./**/*.js,ts,jsx,tsx,html",
      "./*.js,ts,jsx,tsx,html",
    ],
    options: 
      safelist: 
        deep: [/bg$/, /col$/, /row$/, /text$/],
        greedy: [/bg$/, /col$/, /row$/, /text$/],
      ,
    ,
  ,
  darkMode: false, // or 'media' or 'class'

  theme: 
    extend: 
      opacity:  13: "0.13" ,
      boxShadow: 
        head: "0 0 6px 0 rgba(0, 0, 0, 0.36)",
        search: "0 9px 34px 0 rgba(0, 0, 0, 0.19)",
      ,
      gridTemplateRows: 
        // Simple 8 row grid
        "8-em": "repeat(8, minmax(0, 5em))",
        8: "repeat(8, minmax(0, 1fr))",
      ,
      backgroundImage: 
        "gradient-radial": "radial-gradient(var(--gradient-color-stops))",
      ,
      fontFamily: 
        sans: ["Stolzl", ...defaultTheme.fontFamily.sans],
      ,
      fontSize: 
        "2.5xl": "1.6rem",
        0.8: "0.8rem",
        xxs: "0.6rem",
        micro: "0.4rem",
        nano: "0.2rem",
      ,
      zIndex: 
        0: 0,
        10: 10,
        20: 20,
        30: 30,
        40: 40,
        50: 50,
        25: 25,
        50: 50,
        60: 60,
        75: 75,
        100: 100,
        200: 200,
        auto: "auto",
      ,
      colors: 
        // old primary blue #005a94
        // old lightblue #f4f7fd
        //TODO change colors
        primaryLightBlue: "#f1f7fb",
        primaryBlue: process.env.NEXT_PUBLIC_PRIMARY || "#1579B9",
        primaryYellow: process.env.NEXT_PUBLIC_ACCENT || "#FDC607",    
      ,
      radialGradientColors: 
        // defaults to 
        "blue-blue": ["#0171BA", "#005a94"],
        "lb-lb": ["#3776dd", "#215dc0"],
      ,
      animation: 
        spin3d: "spin3d 6s linear infinite ",
      ,
      keyframes: 
        spin3d: 
          "0%": 
            transform: "perspective(1000px) rotateY(0deg)",
            filter: "brightness(100%)",
          ,
          "25%":  filter: "brightness(60%)" ,
          "50%": 
            filter: "brightness(100%)",
          ,
          "75%":  filter: "brightness(60%)" ,
          "100% ": 
            transform: "perspective(1000px) rotateY(360deg)",
            filter: "brightness(100%)",
          ,
        ,
      ,
    ,
  ,
  plugins: [
    require("tailwindcss-gradients"),
    require("@tailwindcss/line-clamp"),
    function ( addComponents ) 
      addComponents(
        ".container": 
          maxWidth: "100%",
          //640
          "@screen sm": 
            maxWidth: "640px",
          ,
          //768
          "@screen md": 
            maxWidth: "768px",
          ,
          //1024
          "@screen lg": 
            maxWidth: "1024px",
          ,
          //1280
          "@screen xl": 
            maxWidth: "1280px",
          ,
          //1280
          "@screen 2xl": 
            maxWidth: "1280px",
          ,
        ,
        ".container2": 
          maxWidth: "100%",
          //640
          "@screen sm": 
            maxWidth: "640px",
          ,
          //768
          "@screen md": 
            maxWidth: "640px",
          ,
          //1024
          "@screen lg": 
            maxWidth: "768px",
          ,
          //1280
          "@screen xl": 
            maxWidth: "1118px",
          ,
          //1280
          "@screen 2xl": 
            maxWidth: "1118px",
          ,
        ,
      );
    ,
  ],
  variants: 
    display: ["group-hover"],

    extend: 
      backgroundColor: ["odd"],
      borderColor: ["odd", "even", "active"],
      borderOpacity: ["odd", "even", "active"],
      borderWidth: ["odd", "even", "active"],
      borderStyle: ["odd", "even", "active"],
      display: ["disabled", "responsive"],
      opacity: ["disabled"],
      cursor: ["disabled", "hover"],
      backgroundColor: ["disabled"],
      borderWidth: ["hover,focus"],
      transform: ["hover", "focus", "group-hover"],
      scale: ["hover", "focus", "group-hover"],
      width: ["hover", "group-hover"],
      height: ["hover", "group-hover"],
      padding: ["hover", "focus"],
    ,
  ,
;

【问题讨论】：

您可以使用npm run build 构建您的项目吗？或者这只发生在开发服务中？

它正在正确构建它，只发生在开发服务中，是的

【参考方案1】：

我已经解决了，对于任何有同样问题的人

首先我必须卸载 @tailwindcss/jit 依赖项，因为它包含在 tailwind css v2.2.7+ 中

然后我必须将 postcss 配置为使用 'tailwindcss' 而不是 '@tailwindcss/jit'，

然后我将脚本更改为在我的顺风构建脚本之前包含 TAILWIND_MODE=watch，并将 --watch 添加到末尾

    "tailwind:build": "TAILWIND_MODE=watch tailwind build -i ./src/styles/tailwind.css -o ./src/styles/styles.css --watch ",

一切都开始工作了，没有无限循环！