class = "hidden sm: flex" не работает в TailwindCSS - PullRequest
Новая
       11

class = "hidden sm: flex" не работает в TailwindCSS

0 голосов
/ 05 апреля 2020

Я хочу сделать свою навигационную панель отзывчивой, добавив скрытый sm: flex к указанному элементу c. Это означает, что он будет скрыт по умолчанию, но будет отображаться только на маленьких экранах и выше. Я сделал некоторую отладку и обнаружил, что скрытое перекрывает все, даже адаптивные варианты. Другие свойства отображения будут работать на адаптивных вариантах. вот мой код: 

className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"

1 Ответ

0 голосов
/ 06 апреля 2020

Tailwind основан на мобильном дизайне, как и bootstrap и некоторые другие CSS платформы. Ссылка: https://tailwindcss.com/docs/responsive-design/#mobile -first

Это означает, что классы без вариантов будут сначала применяться к меньшим экранам, а затем вы можете добавить варианты для больших экранов.

Итак вещь, которую вы хотите достичь, должна выглядеть следующим образом: 

className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"

Надеюсь, это поможет!

...