Как настроить отображение элемента на среднем экране и ниже в Tailwind?

Question

У меня есть div с классом hidden md:block размещение этого элемента из heroicon: <MenuIcon class="ml-1 mr-2 h-5 w-5 text-gray-500"/>.

В настоящее время элемент div отображается только при размере экрана, но я хочу отображать его на md и ниже, как именно это сделать?

Answer 1

Точки останова при попутном ветре в первую очередь являются мобильными, поэтому они идут ВВЕРХ. Сначала все видно.

Вам просто нужно спрятать элем. от некоторых размеров и выше:

см -> md -> lg -> xl -> 2xl

class="lg:hidden"скроет элемент от lg и выше - lg, xl, 2xl

---

Для получения дополнительной информации по теме см .: Адаптивный дизайн в Tailwind.

Answer 2

Я считаю, что вы делаете это наоборот.

В основном =>https://tailwindcss.com/docs/responsive-design

Чаще всего этот подход удивляет людей тем, что для стилизации чего-либо для мобильных устройств вам нужно использовать версию утилиты без префикса, а не версию с префиксом sm :. Не думайте, что sm: означает «на маленьких экранах», думайте об этом как «в маленькой точке останова».

Так что тебе придется сделать class="block lg:hidden" в ваших классах, чтобы он работал так, как вы описываете :)