Tailwind's arbitrary values for breakpoints stopped working in react.js

Question

I was using min-[1000px]:bg-orange-400 and max-[1000px]:bg-orange-400. Somehow they suddenly stopped working and I got this in the terminal as tailwind intellisense's output:

The 'min-' and 'max-' variants are not supported with a 'screens' configuration containing mixed units.

tailwind config:

module.exports = {
 content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {   
    extend: {
      colors: {
        brand: "#2E3192",
      }, 
    },
  },
};

could not find the bug

Answer 1

For arbitrary min-* and max-* values to work in TailwindCSS, you must have defined screens in your tailwind.config.js file (even if the screens/breakpoints you define are the same as the defaults). This is stated in the blog post announcing the feature here: https://tailwindcss.com/blog/tailwindcss-v3-2#max-width-and-dynamic-breakpoints

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
};

Answer 2

I've never seen this min and max syntax you're using, but my advise would be to use the breakpoints tailwind provides out of the box or extending their breakpoints in the tailwind config.

In your case the next breakpoint tailwind defines would be lg (1024px). So you could go with this: bg-orange-300 lg:bg-orange-400.

You can use arbitrary media queries as well, but I would only do that as a last resort, because it doesn't align with the overall design system then and you get into specificity troubles when you're using multiple of those on one element. In that case it would look like this: bg-orange-300 [@media(min-width:1000px)]:bg-orange-400