我正在关注 Youtube 上 TailwindCSS 创建者的导航栏教程,我被困在这部分,当屏幕宽度达到
sm:block
断点时,hidden
类应该覆盖 sm:
类。
这几乎完全相同的示例按预期工作,其中当页面宽度增加时显示项目。
但是,当我尝试在使用
npx create-next-app --example blog-starter-typescript
创建的项目上实现此功能时。 这是我从哪里得到的,当页面宽度增加时,导航栏上的项目不会显示。
这是我的仓库中不起作用的确切位置。
如果我用
hidden sm:block
替换 sm:hidden block
就可以了。如果我为每个断点添加不同的背景颜色,这也有效。
任何人都可以看到我做错了什么吗?
谢谢
“Chrome 的深色主题”扩展已注入其中包含
display : hidden !important
的样式。删除该扩展程序解决了我的问题。
在看到应用程序在隐身模式下按预期工作后,我意识到了这一点。
hidden
未正确覆盖
试试sm:!block