Costume break points not sorting

[blaxtonj]

this is driving me bonkers I can't seem to figure out why my costume break point's aren't sorting. I recently upgraded to v4 and I got everything working expect this. My best guess is that I am doing something wrong with @theme or my prettier isn't setup right but the break points are the only thing it's not sorting right, when I hover over xsm i get the intellisense I am all out of idea's how to fix this. With my setup in v3 my breakpoints just automatically sorted correctly so I have no idea why this is not.

tailwindcss v4.0.13
prettier v3.5.3
prettier-plugin-tailwindcss V0.6.11

any and all idea's would be a great help

@theme {

  --breakpoint-mobile: 22.5rem;
  --breakpoint-xsm: 31.25rem;
  --breakpoint-3xl: 125rem;

  --font-poppins: 'Poppins', sans-serif;
  --font-jura: 'Jura', sans-serif;
  --font-ubuntu: 'Ubuntu', sans-serif;

  --color-primary: #10537c;
  --color-secondary: #134567;

  }

{
    "plugins": [
        "prettier-plugin-organize-imports",
        "prettier-plugin-tailwindcss"
    ]
  }

 <div className="xsm:translate-x-[min(30%,1rem)] flex translate-x-[min(0%,1rem)] space-x-5 sm:ml-2.5 sm:space-x-10">

[DishantGusain]

Facing similar issue.

When i start a new project, I create few custom breakpoints depending on design requirements in tailwind.config.ts for example

theme: { extend: { screens: { primaryScreen: "1420px", }, }, }

and use it like

lg:text-xl primaryScreen:text-2xl

This used to work flawlessly but now in the new version when i create same custom breakpoints in CSS file like

@theme inline {
  --breakpoint-primaryScreen: 1420px
}

and use it the same way like

lg:text-xl primaryScreen:text-2xl

It won't work unless i add !important rule like

lg:text-xl primaryScreen:text-2xl!

[blaxtonj]

I figured out the issue, I feel dumb for not thinking about this earlier. I guess with the new version you need to specify the stylesheet in .prettierrc once I did that it sorted properly.

{
    "plugins": [
        "prettier-plugin-organize-imports",
        "prettier-plugin-tailwindcss"
    ],
     "tailwindStylesheet": "./app/globals.css"

  }