CSS Tailwind скрыт и виден

Бэкенд-разработчики здесь учатся. Я пытаюсь скрыть элемент на малых и средних экранах и увидеть его на остальных экранах.

Но дело в том, что когда я это делаю sm:hidden, он скрывает элемент для маленьких экранов и выше. А когда пытаюсь сделать sm:hidden md:visible элемент не виден на средних экранах и выше. Как мне это сделать?

css frontend tailwind-css styling hidden

24.12.2022 11:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как мы можем прочитать в официальных документах:

По умолчанию Tailwind использует систему точек останова для мобильных устройств.

Тогда в вашем случае на маленькой точке останова hidden и visible на больших точках останова lg и выше:

<div class = "hidden lg:block">
  <!-- ... -->
</div>

Пример:

<!doctype html>
<html>

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <script src = "https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class = "hidden lg:block">
    <h1 class = "text-3xl font-bold underline">
      Hello world!
    </h1>
  </div>

</body>

</html>

Это сработало. Спасибо, чувак. Я не могу проголосовать, потому что я только что создал аккаунт

— 24.12.2022 11:49

@carl Но вы можете принять ответ, поскольку он решил вашу проблему :-P! Пожалуйста! ;-)

— 24.12.2022 11:52

Начиная с Tailwind v3.2, в этом случае его можно сократить до max-lg:hidden

— 24.12.2022 12:33

24.12.2022 11:28