Max-width screens named with numbers (e.g. 1800, 1440 instead of xl, lg) not working

[Bobakanoosh]

Re-opening https://github.com/tailwindlabs/tailwindcss/issues/5956, which asks for support for numerically named max-width breakpoints.

It was initially fixed, and then reverted in https://github.com/tailwindlabs/tailwindcss/pull/6289.

What version of Tailwind CSS are you using? 3.4.4

What build tool (or framework if it abstracts the build tool) are you using? N/A

What version of Node.js are you using? N/A

What browser are you using? N/A

What operating system are you using? N/A

Reproduction URL https://play.tailwindcss.com/HZk7pMuTwQ

Describe your issue I personally prefer to use numbered breakpoint names (e.g. 1800, 1200 vs 2xl, xl) as it feels a lot more intuitive during development. This worked with min-width breakpoints, but seems to not work with max-width breakpoints. The playground link documents this issue pretty well.

[G0HAN3]

Hey @Bobakanoosh can you assign me this issue.

[amiii123malviya]

Hello @Bobakanoosh,

Is this issue still active? I would like to work on this.

Best Regards.

[Bobakanoosh]

Anyone is free to work on this, I'm not a maintained so I cannot assign anyone.

[farhanmian]

Hi @Bobakanoosh, It's working.

Add this code in tailwind.config file:

screens: { 568: "568px", 768: "768px", 1024: "1024px", 1280: "1280px", },

---

Example: In tailwind.config

import type { Config } from "tailwindcss";

const config: Config = { content: [ "./src/pages//*.{js,ts,jsx,tsx,mdx}", "./src/components//.{js,ts,jsx,tsx,mdx}", "./src/app/**/.{js,ts,jsx,tsx,mdx}", ], theme: { screens: { 568: "568px", 768: "768px", 1024: "1024px", 1280: "1280px", }, }, plugins: [], }; export default config;

[RobinMalfait]

Hey!

I'm going to close this issue now that Tailwind CSS v4, in Tailwind CSS v4 using numbers as breakpoint names work (and are correctly sorted): https://play.tailwindcss.com/TO4OOUSDCp

The biggest issue you ran into was the sorting of the breakpoints, in v4 they are sorted based on the value not based on the name of the breakpoint. So this now also works as expected: https://play.tailwindcss.com/AWOx8VBksH

However, you can't configure "max" breakpoints anymore. Instead, you configure a breakpoint value, and if you want to have "max" breakpoints, you can use max-<breakpoint-name>:flex variants instead. E.g.: https://play.tailwindcss.com/67uHCv8Aj1

We simplified this such that it will be the same behavior in any Tailwind CSS v4 project.

So while we can fix the behavior in v3, the behavior on how you use these breakpoints change in v4 (for the max breakpoints that is).

Hope this helps!