Issue with compiling Tailwindcss in nextjs JIT mode

Our current project involves using tailwindcss and things were going smoothly until the clients requested a "pixel perfect" design. This meant that every element needed to be set in pixels instead of rem units. Instead of adding countless classes like h-1px, h-2px ... h-100px, I decided to switch on JIT mode and use h-[100px] instead. The issue I'm facing now is that the compiler keeps recompiling endlessly, even after making no changes, and it persists even when I stop the development server. A process continues running on port 3000, preventing me from restarting the server. So my question is, how do I halt this infinite loop of recompilation?

I am utilizing: tailwindcss 2.1.2 tailwindcss/jit 0.1.18

Here is my tailwind configuration at the moment; there may be something triggering the recompilation 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: {
        "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: {
        primaryLightBlue: "#f1f7fb",
        primaryBlue: process.env.NEXT_PUBLIC_PRIMARY || "#1579B9",
        primaryYellow: process.env.NEXT_PUBLIC_ACCENT || "#FDC607",    
      },
      radialGradientColors: {
        "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%",
          "@screen sm": {
            maxWidth: "640px",
          },
          "@screen md": {
            maxWidth: "768px",
          },
          "@screen lg": {
            maxWidth: "1024px",
          },
          "@screen xl": {
            maxWidth: "1280px",
          },
          "@screen 2xl": {
            maxWidth: "1280px",
          },
        },
        ".container2": {
          maxWidth: "100%",
          "@screen sm": {
            maxWidth: "640px",
          },
          "@screen md": {
            maxWidth: "640px",
          },
          "@screen lg": {
            maxWidth: "768px",
          },
          "@screen xl": {
            maxWidth: "1118px",
          },
          "@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

After encountering the issue, I managed to find a solution that worked for me.

The initial step involved removing the @tailwindcss/jit dependency, as it is already integrated in Tailwind CSS version 2.2.7 and above.

Next, I needed to reconfigure PostCSS to utilize 'tailwindcss' instead of '@tailwindcss/jit'.

Subsequently, I updated my script to include TAILWIND_MODE=watch prior to executing my tailwind build command, followed by adding --watch at the end.

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

Upon making these adjustments, everything functioned properly without any recursive issues!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a delay between two div elements using jQuery

I have two Divs with the class "sliced", each containing three images with the class "tile". When I animate using jQuery, I am unable to add a delay between the "sliced" classes. However, I have successfully added a delay between the "tile" classes. index ...

How to enable drag-and-drop functionality for an iframe?

I've successfully made a chat widget draggable using react-draggable. However, the chat widget is also consumed by an iframe created entirely with HTML. I need the iframe to be draggable as well, but react-draggable doesn't support this. Are ther ...

Avoid having a pre tag enclosed long line exceed its container's width

Within the <pre> </pre> tags, I have a lengthy single line of text that needs formatting. Is there a method to automatically wrap the text or must I manually insert <br> tags within the text? ...

Setting both the height and row height of the table is not allowed

Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...

Utilizing the active tab feature within CSS

I am currently working with a detailed structure of bootstrap theme classes. Currently, I am in the process of designing a menu. This is the code snippet for the navigation bar design in Bootstrap- <div class="navbar navbar-fixed-top navbar-invers ...

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs). $(document).click(function (event) { if (!$(event.target).hasClass('cli ...

Switch up the animation based on the state in AngularJS

In my AngularJS application, I have implemented CSS animations for transitioning between states. The animations involve sliding content from left to right with specific timings and transforms. .content.ng-enter, .content.ng-leave { -webkit-animation-t ...

Whenever I try to retrieve a file from my backend using formData.get('file'), the FormData functionality inexplicably sends back a null value instead. Even though I

I am encountering an issue while trying to send a file to parse to my backend using Flask. When I send the file using Postman, it works correctly. However, when I attempt to send it through my React app, it does not go through. <div ...

Problem with applying Tailwind CSS classes in the Creative Tim Notus React template

Currently, I am utilizing the Notus react template. My goal is to adjust text size based on different screen sizes, however, it appears that this functionality is not functioning properly. Even on medium screens, the text size remains at "text-2xs." In a ...

Error: Invalid Syntax Detected in React

I encountered an error that reads as follows: events.js:72 throw er; // Unhandled 'error' event ^ SyntaxError: /vagrant/resources/assets/js/react/react_app.js: Unexpected token (366:10) 364 | var InvestorsTable = React.cr ...

Get Notified of Errors Instead: Utilizing SweetAlert2 for Error Alerts Only

I am in need of help with implementing a functionality in my code that switches between successful operation alerts and error alerts with sweetalert2. Currently, only the error alerts are being displayed. I'm not sure where I'm going wrong. Here ...

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

What is the most effective method for updating edited rows in a DataGrid MUI and transferring them to

Is there a way to update the values I just edited in firebase after using editRow (please correct me if I'm mistaken)? Within DataGrid //Enable row edit mode editMode="row" //Any updates made in the row are stored in this variable, overrid ...

How should a child component specify the type of component being passed in props?

Consider the following snippet from App.tsx : <Layout header={ <Header/> } </layout> Now, let's take a look at the Layout component : export default function Layout({header, body}: any) { return ( <div className="layou ...

Issue: The navigation object could not be located. Please ensure that your component is nested within a NavigationContainer. (Instructions on how to utilize useNavigation within the Navigation container)

Currently, I am in the process of developing a react-native MERN chat application and have reached the point where I need to implement a profile page for users to edit or add their data. To enable users to access this page, I have included a button inside ...

Tips for troubleshooting the error message "is not a function" in a React application

Hi there, I'm currently delving into learning React and have encountered an issue that says: (TypeError: newsData.map is not a function) in my browser when running my code. Oddly enough, Visual Studio Code doesn't flag any errors, only Chrome doe ...

The utilization of the useframe function led to the context being lost in the three.js

Attempting to animate the size of a React 3 Fiber drei Box component using useFrame has presented some challenges for me. The geometry functions smoothly until I introduce the useFrame function, which triggers a THREE.WebGLRenderr: Context Lost error in th ...

CORS policy is preventing all development requests from going through

In my setup, I have a Rails API paired with a React client side. Everything has been running smoothly for some time now, but recently I encountered an error while working on it: Access to XMLHttpRequest at 'http://localhost:3000/api/v1/user/authed&apo ...

Encountering difficulties including Bootstrap in React-app after attempting global installation

After using the command npm i -g bootstrap to install bootstrap, I attempted to include it in a React-app by adding import "bootstrap/dist/css/bootstrap.css";. Unfortunately, this resulted in an error being thrown. Failed to compile. ./src/index.js Modu ...

Toggling forms with HTML <select> elements: A step-by-step guide

In the process of creating a web application, I am faced with the task of registering users based on their specific category. To accomplish this, I have incorporated a combo-box where users can indicate their user type. My objective is to display an appro ...