如何用TailwindCSS实现移动端隐藏元素、中等尺寸屏幕显示效果

• hidden是Tailwind的display类，对应CSS属性display: none，作用是让元素完全脱离文档流不渲染
• visible是Tailwind的visibility类，对应CSS属性visibility: visible，仅控制元素是否可见，不会修改display属性
• 你写的md:visible只能将元素的可见性设为可见，但无法覆盖全局的display: none属性，所以元素始终无法显示

<p className="hidden md:block">Hello</p>

如果元素需要其他display展示形式，替换md:block为对应类即可：

• 行内元素用md:inline
• 行内块元素用md:inline-block
• flex布局容器用md:flex
• grid布局容器用md:grid

• 视口宽度小于md断点（Tailwind默认值为768px）时，hidden生效，元素隐藏
• 视口宽度大于等于md断点时，响应式前缀md:对应的类优先级更高，覆盖hidden的display属性，元素正常展示

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