Tailwind CSS "sm:block" class is not overwriting "hidden" class after passing the "sm:" breakpoint

Question

I am following a navbar tutorial from the creator of TailwindCSS on Youtube and I am stuck on this part, where the sm:block class should override the hidden class when the screen width hits the sm: breakpoint.

This almost exactly the same example works as expected, where the items show when the page's width is increased.

However, when I try to implement this on my project which is created using npx create-next-app --example blog-starter-typescript. This is where I got it from, the items on the navbar don't show when the page width is increased.

Here is the exact spot in my repo where this doesn't work.

If I replace hidden sm:block with sm:hidden block it works. and if I add a different background colour to each breakpoint, that also works.

Can anyone see what I am doing wrong?

Thanks

Answer 1

"Dark Theme for Chrome" extension has been injecting styling that had display : hidden !important in it. Removing that extension has resolved my issue.

I realised this after seeing the app working as expected in incognito mode.

Answer 2

hidden is not override correctly try sm:!block