Tailwind v4.1.18 Custom breakpoints With tw: prefix is not generating media queries

[LukeJennings1]

As the title suggests I'm trying to migrate to vite tailwind v4.1.18 from v3 and have defined some custom breakpoints to match some old bootstrap sections of our codebase. My main.css master tailwind file looks like this

@import "tailwindcss" prefix(tw); @theme { /* Bootstrap-matching breakpoints */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px;
}

It is correctly genereating tailwind with the prefix of tw: (IE tw:flex etc..) but when I use sm:tw:flex it does not generate the media query nor generate it. Could someone please help? I would previously use sm:tw-flex but the prefix now needs to be tw: which has thrown me.

[wongjn]

tw: always go first, so you'd do tw:sm:flex

[LukeJennings1]

tw: always go first, so you'd do tw:sm:flex

Thanks for clearing that up! was that a change in v4? I previously did it the opposite way

[wongjn]

Yes, it was a change in v4.