通过 "sm:" 断点后，Tailwind CSS "sm:block" class 不会覆盖 "hidden" class
Tailwind CSS "sm:block" class is not overwriting "hidden" class after passing the "sm:" breakpoint
我正在关注 Youtube 上 TailwindCSS 的创建者的导航栏教程，但我被困在 this part，其中 sm:block class 应该覆盖 hidden class 当屏幕宽度到达 sm: 断点时。
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 这不起作用。
如果我将 hidden sm:block 替换为 sm:hidden block 就可以了。如果我为每个断点添加不同的背景颜色，那也有效。
谁能看出我做错了什么？
谢谢
“Chrome 的深色主题”扩展一直在注入包含 display : hidden !important 的样式。删除该扩展程序解决了我的问题。
看到应用程序在隐身模式下按预期运行后，我意识到了这一点。
我正在关注 Youtube 上 TailwindCSS 的创建者的导航栏教程，但我被困在 this part，其中 sm:block class 应该覆盖 hidden class 当屏幕宽度到达 sm: 断点时。
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 这不起作用。
如果我将 hidden sm:block 替换为 sm:hidden block 就可以了。如果我为每个断点添加不同的背景颜色，那也有效。
谁能看出我做错了什么？
谢谢
“Chrome 的深色主题”扩展一直在注入包含 display : hidden !important 的样式。删除该扩展程序解决了我的问题。
看到应用程序在隐身模式下按预期运行后，我意识到了这一点。