Tailwindcss nextjs JIT mode compile error - css

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!