Responsive Design isn't behaving how I would expect

[ld-john]

I have been working on a client's website using Tailwind CSS 4, and when I set a responsive element, it doesn't override the base version of the class. For instance "flex-col lg:flex-row" setting it like this, which works in Tailwind CSS 3 and I would expect to keep working, but now it remains Flex Col regardless of the size of the screen. I have added important to the responsive element, but that isn't really ideal. Am I doing something wrong?

[wongjn]

Seems like there could be something particular to your project, such as some misconfiguration.

[ld-john]

I have seen it happening in multiple different projects, some I thought were because I had updated from Tailwind 3 to Tailwind 4. I have just used the default set up from the documentation on the website.

[wongjn]

Consider providing a git repo that reproduces the unexpected behavior and we can take a look.

[ld-john]

Sorry, it took me a while to get a repo that didn't have client information:

https://github.com/ld-john/lorfell

[wongjn]

Seems like it should work, since flex-col is in build.css on line 714 while lg:flex-row is on 2231. Consider checking your browser is using the most updated copy of the CSS file. With devtools open, there normally is a Disable cache in the Network tab.

Otherwise, it is difficult to debug further since it seems like there are other prerequites to get the code in the browser.

[ld-john]

I have cleared my local cache, and have been working on my project for months so would be surprised if it was cached. This is a WordPress theme.