Адаптивный CSS в Tailwind

@media (min-width: 768px) → md:. 1024px → lg:. Сложные запросы — ручная проверка.

Медиазапросы с min-width хорошо ложатся на префиксы Tailwind: 768px это md:, а 1024px — lg:. Сложности начинаются с max-width, ведь Tailwind строится от узкого экрана к широкому. Комбинированные условия и диапазоны почти никогда не переносятся автоматически, поэтому их переписывают руками и проверяют в макете.

Префиксы md: и lg:

Media queries на дефолтных breakpoints → md: / lg:. Редкие breakpoints → заметка или CSS.

Mobile-first

Tailwind исходит из мобильной базы и растёт вверх. Мысленно инвертируйте, если CSS был desktop-first.

Одно свойство — один префикс

В примере Responsive меняйте по одной ширине, чтобы увидеть, какая заметка появится.

Попробовать

Открыть конвертер

.example { display: flex; gap: 1rem; padding: 1rem; }

Заметка о доверии: проверяйте результат визуально. Конвертер — черновик для разработчиков.