tailwindcss: Как скрыть и отобразить (переключить) html-элементы с помощью медиа-запросов при изменении размера браузера?

#html #css #tailwind-css

Вопрос:

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

Вот что у меня получилось, что не работает при изменении размера окна браузера:

 <template>
  <div>
    <span class="m-1 hidden xl:inline">
      XL
    </span>
    <span class="m-1 hidden lg:inline xl:hidden">
      L
    </span>
    <span class="m-1 hidden md:inline lg:hidden">
      M
    </span>
    <span class="m-1 hidden sm:inline md:hidden">
      S
    </span>
    <span class="m-1 inline sm:hidden">
      XS
    </span>
  </div>
</template>

Есть ли у меня логическая ошибка в том, как медиа-запросы работают в попутном ветре?

Или, может быть, самое сложное — перезаписать display: none; , если он уже установлен? (Тогда я предполагаю, что это проблема css) XS, похоже, работает.

Ответ №1:

Я попробовал ваш пример, и он отлично работает для меня на игровой площадке с попутным ветром, когда я изменяю размер окна. Вы уверены, что классы прошли процесс сборки? Вы хотите показывать один текст за раз, когда вы изменяете размер окна. По одному для каждой точки останова, если я все правильно понял.