Скрытие элементов в мобильной версии

Класс md:hidden (md от middle device (?) ) используется в Tailwind CSS для скрытия элемента на экранах среднего размера (и шире — на больших экранах). Пример:

<div class="md:hidden ">
    <!-- остальной html content -->

https://george75.gitlab.io/articles/tailwind-css-responsive-design
Помимо md:hidden, в Tailwind есть и другие способы управления видимостью:

• hidden — скрывает элемент на всех экранах (базовый класс).
• lg:block — показывает элемент только на экранах lg и выше.
• max-md:hidden — скрывает элемент, пока ШИРИНА экрана не достигнет md (то есть на экранах меньше md элемент виден).

Контрольные точки в Tailwind:

• sm — 640 пикселей и больше
• md — 768 пикселей и больше
• lg — 1024 пикселей и больше
• xl — 1280 пикселей и больше
• 2xl — 1536 пикселей и больше

Применение адаптивных утилит

Любой утилитарный класс можно сделать адаптивным, добавив ему префикс контрольной точки. Это позволяет изменять стили при разных размерах экрана, не создавая пользовательские медиазапросы.
Пример:

<div class="text-base md:text-lg lg:text-xl">
    Responsive Text
</div>

В этом примере:

• text-base - применяется для мобильных экранов.
• md:text-lg - увеличивает размер текста на экранах средних размеров (768 пикселей и более).
• lg:text-xl - увеличивает размер текста на экранах больших размеров (1024 пикселей и более).

Пример скрытия текста на мобильных устройствах:

class="invisible md:visible"

Альтернативы

Помимо md:hidden, в Tailwind есть и другие способы управления видимостью:

• hidden — скрывает элемент на всех экранах
• lg:block — показывает элемент только на экранах lg и выше.
• max-md:hidden — скрывает элемент, пока ширина экрана не достигнет md (то есть на экранах меньше md элемент виден).

Адаптивные сетки

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

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-200 p-4">Item 1</div>
    <div class="bg-gray-200 p-4">Item 2</div>
    <div class="bg-gray-200 p-4">Item 3</div>
</div>

grid-cols-1 - одна колонка на небольших экранах. md:grid-cols-2 - две колонки на средних экранах. lg:grid-cols-3 - три колонки на больших экранах.

Адаптивное скрытие элементов

Tailwind предоставляет утилиты, позволяющие отобразить или скрыть элементы в различных контрольных точках с помощью класса hidden и адаптивных утилит block, inline-block и flex, обеспечивающих видимость. Пример:

<div class="hidden lg:block">
    This element is hidden on mobile but visible on large screens.
</div>

В этом примере элемент по умолчанию скрыт, но становится видимым block на экранах размером lg (1024 пикселя и больше).

Адаптивные утилиты Flexbox

Tailwind упрощает создание адаптивных макетов с использованием flexbox модели, позволяя переключаться между макетами в разных контрольных точках (контрольные точки (в английском — breakpoints) в CSS — это специальные значения ширины экрана, при достижении которых дизайн сайта меняется). Пример:

<div class="flex flex-col md:flex-row">
    <div class="bg-blue-500 p-4">Column 1</div>
    <div class="bg-blue-500 p-4">Column 2</div>
</div>

• flex-col - располагает элементы вертикально на небольших экранах.
• md:flex-row: - переключает в горизонтальную компоновку на экранах среднего и большого размеров.