Tailwind CSS“sm:block”类在通过“sm:”断点后不会覆盖“hidden”类

Question

我正在关注 Youtube 上 TailwindCSS 的创建者的导航栏教程，我被困在 this part 上，当屏幕宽度达到 sm: 断点时，sm:block 类应该覆盖 hidden 类。

This almost exactly the same example 按预期工作，当页面宽度增加时显示项目。

但是，当我尝试在使用 npx create-next-app --example blog-starter-typescript 创建的项目上实现此功能时。 This is where I got it from，当页面宽度增加时，导航栏上的项目不显示。

Here is the exact spot in my repo 这不起作用。

如果我用sm:hidden block 替换hidden sm:block，它就可以工作。如果我为每个断点添加不同的背景颜色，那也可以。

谁能看出我做错了什么？

谢谢

Answer 1

“Chrome 的深色主题”扩展程序一直在注入包含 display : hidden !important 的样式。删除该扩展程序解决了我的问题。

在看到应用在隐身模式下按预期运行后，我意识到了这一点。