如何在 Tailwind 中将元素设置为显示在中屏及下方？答案

【问题标题】：How to set an element to show on medium screen and below in Tailwind?如何在 Tailwind 中将元素设置为显示在中屏及下方？
【发布时间】：2021-08-10 08:41:50
【问题描述】：

我有一个类为 hidden md:block 的 div，其中包含来自 heroicon 的这个元素： <MenuIcon class="ml-1 mr-2 h-5 w-5 text-gray-500"/>.

目前，div元素只在屏幕尺寸为md时显示，但我想在md下显示和，我该怎么做呢？

【问题讨论】：

标签： responsive-design tailwind-css

【解决方案1】：

Tailwind 断点首先是移动的，所以它们会向上移动。起初一切都是可见的。

你只需要隐藏元素。从一些大小及以上：

sm -> md -> lg em> -> xl -> 2xl

class="lg:hidden" 将隐藏 lg 及以上的元素 - lg, xl, 2xl

有关该主题的更多信息，请查看：Responsive design in Tailwind

【讨论】：

是的，我只是想知道我什么时候浏览文档。那我就不能手动倒序了？
仅当您在配置中重新定义断点时，我不会推荐它，因为 TW 是围绕移动优先方法设计的；）gist.github.com/heytulsiprasad/e8bae1eba7b90ef66b8b1b1ae0861d96

【解决方案2】：

我相信你正在做相反的事情。

基本上 => https://tailwindcss.com/docs/responsive-design

这种方法最让人们惊讶的地方是样式对于移动设备，您需要使用无前缀版本的实用程序，而不是 sm: 前缀版本。不要认为 sm: 作为意义 “在小屏幕上”，将其视为“在小断点处”。

因此，您必须在课程中执行 class="block lg:hidden" 才能使其按照您的描述工作:)

【讨论】：

太棒了！谢谢老兄！