Version 4.0.4 - Breaks desktop first support

[austinwilcox]

Tailwind: 4.0.4
Build-tool: Vite 6.0.11
Node: 23.5.0
Browser: Chrome/Brave
OS: Windows and Linux

Describe your issue
We are using an anti-pattern with our project. We have been building desktop first and this worked just fine with tailwind v3. When we upgraded to v4 all of our media breakpoints have changed. We have scoured the docs and didn't see any reference to this changing. Here is what we see with the v3 code, and here is what the v4 code is generating.

V3

Code Snippet

<div class="hidden w-full justify-center md:hidden sm:flex">

Result in DOM

V4

Code Snippet

<div className="hidden w-full justify-center md:hidden sm:flex">

Result in DOM

Here is relevant part of the tailwind.config.js.

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "selector",
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      "2xl": { max: "1536px" },
      xl: { max: "1280px" },
      lg: { max: "1024px" },
      md: { max: "900px" },
      sm: { max: "600px" },
    }
  },
  plugins: [],
}

This worked fine in v3 and hopefully we are just missing something small and this can be fixed without us having to downgrade back to v3.

[wongjn]

You can convert your variants to use the max-*: variants. Otherwise, you can use the @custom-media directive to manually redefine the screen variants to be reversed, max-width media queries.

[austinwilcox]

Now by change the variants, I'm assuming you mean something like this

<div class="hidden w-full justify-center max-md:hidden max-sm:flex">

I have tried doing this, and tailwind doesn't recognize max-md or max-sm.

[wongjn]

Seems to be working in this Tailwind Play which would suggest something particular to your project is stopping it from working properly. Consider providing a project that reproduces the unexpected behavior if you would like further debugging assisstance.

[austinwilcox]

@wongjn I was able to get it working now thanks to the tailwind play you supplied. Thank you! The issue came with this part of our tailwind config:

screens: {
  "2xl": { max: "1536px" },
  xl: { max: "1280px" },
  lg: { max: "1024px" },
  md: { max: "900px" },
  sm: { max: "600px" },
}

As soon as I changed it to this:

screens: {
  "2xl": "1536px",
  xl: "1280px" ,
  lg: "1024px",
  md: "900px",
  sm: "600px",
}

and then ran a script that updated all *: to max-*: I got it working.

Should it be added in the documentation/upgrade that support for max within the screens option is no longer supported?

Here is the bash script I ran to mass update the directives in case anyone else runs into the same issue I did.

find . -type f -exec sed -i 's/sm:/max-sm:/g' {} \;

I just replaced sm and max-sm with the appropriate values each time I ran this.