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

问题描述 投票:0回答:2

我正在关注 Youtube 上 TailwindCSS 创建者的导航栏教程,我被困在这部分,当屏幕宽度达到

sm:block
断点时,
hidden
类应该覆盖
sm:
类。

这几乎完全相同的示例按预期工作,其中当页面宽度增加时显示项目。

但是,当我尝试在使用

npx create-next-app --example blog-starter-typescript
创建的项目上实现此功能时。 这是我从哪里得到的,当页面宽度增加时,导航栏上的项目不会显示。

这是我的仓库中不起作用的确切位置。

如果我用

hidden sm:block
替换
sm:hidden block
就可以了。如果我为每个断点添加不同的背景颜色,这也有效。

任何人都可以看到我做错了什么吗?

谢谢

reactjs next.js responsive tailwind-css
2个回答
4
投票

“Chrome 的深色主题”扩展已注入其中包含

display : hidden !important
的样式。删除该扩展程序解决了我的问题。

在看到应用程序在隐身模式下按预期工作后,我意识到了这一点。


0
投票

hidden
未正确覆盖 试试
sm:!block

© www.soinside.com 2019 - 2024. All rights reserved.