Tailwindcss nextjs JIT mode compile error

Question

We are making a project with tailwindcss and it was going good until the clients wanted a "pixel perfect" design which meant that we needed to set every single thing in pixels instead of rem. So instead of adding 1 gajillon classes like h-1px, h-2px ... h-100px, etc. I desided to enable JIT mode and use h-[100px] instead. The problem is that the compiler keeps compiling, even tough i've changed nothing, and continues to do so, even when i stop the dev server, a process is running on port 3000 (i cannot start the server again, until i stop it). So.. the question is how to stop this infinite loop of recompialtion

im using: tailwindcss 2.1.2 tailwindcss/jit 0.1.18

my tw config is this for now, there might be something that is triggering the loop:

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"],
    },
  },
};

Answer 1

I solved it, for anyone who has the same problem

first i had to uninstall @tailwindcss/jit dependency, as it is included in tailwind css v2.2.7+

then i had to configure postcss to use 'tailwindcss' instead of '@tailwindcss/jit',

then i changed my script to include TAILWIND_MODE=watch before my tailwind build script, and added --watch to the end

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

and everything started working, no infinite loops!