顺风CSS "sm:block“类在传递"sm:”断点后不覆盖“隐藏”类

Question

我遵循Youtube上TailwindCSS的创建者的导航栏教程，我被困在这部分上，当屏幕宽度击中sm:断点时，sm:block类应该覆盖hidden类。

这几乎完全是同一个例子按预期工作，其中项目显示页面的宽度何时增加。

但是，当我试图在使用npx create-next-app --example blog-starter-typescript创建的项目上实现这一点时。我就是从这里得到的，当页面宽度增加时，导航栏上的项不会显示。

这是我的回购的确切地点，在那里这是行不通的。

如果我用hidden sm:block代替sm:hidden block，它就能工作。如果我给每个断点加上不同的背景颜色，那也是可行的。

有人能看出我做错了什么吗？

谢谢

Answer 1

“Chrome的暗主题”扩展一直在注入带有display : hidden !important的样式。删除该扩展已经解决了我的问题。

我意识到这一点，因为我看到了应用程序的工作模式，如预期的隐匿模式。