使用Tailwind类控制div响应式显隐不生效问题求助

• 显隐逻辑编写错误：Div2需要实现移动端显示、桌面端隐藏的效果，你当前使用的hidden lg:block规则逻辑完全相反，该规则的含义是所有宽度下默认隐藏，仅lg及以上宽度的设备显示，完全不符合需求。
• 断点不统一：Div1使用md作为显隐分界，Div2使用lg作为分界，两者分界不一致会导致md到lg的宽度区间内出现显示异常，也无法实现两个div的显隐完全互斥。
• （非显隐问题的语法错误）style属性语法不符合规范，你当前写的style="margin-bottom":5px需要将样式规则全部放在引号内，修正为style="margin-bottom:5px"。

首先确定移动端和桌面端的分界断点，Tailwind默认常用断点为md=768px、lg=1024px，选择一个作为统一的分界即可，下面以md作为分界为例给出修复代码：

• Div1（桌面端显示、移动端隐藏）：原有类规则逻辑正确，仅需保证断点和Div2统一即可

<div class="hidden md:block" style="margin-bottom:5px"></div>

• Div2（移动端显示、桌面端隐藏）：修改类规则为block md:hidden，含义是所有宽度下默认块级显示，md及以上宽度的设备隐藏

<div class="block md:hidden" style="margin-bottom:5px"></div>

如果你需要以lg为分界，统一替换两个div的断点即可：

• Div1类修改为：hidden lg:block
• Div2类修改为：block lg:hidden

内容的提问来源于stack exchange，提问作者SEVENELEVEN