Отступы для каждой ширины

Макет страницы теперь работает при любой ширине, так что займёмся деталями. Экран телефона небольшой, и отступы, которые на компьютере смотрятся свободно, на телефоне только отнимают место. У главного блока стоит py-24: 96 px сверху и снизу от содержимого, поэтому на телефоне вокруг короткого текста много пустого места.

Префикс работает с любым классом Tailwind, не только с макетом: с отступами, размерами, цветами и шрифтами тоже. Подход тот же, что и с заголовком: меньший отступ без префикса и больший — с префиксом md:. Например:

<section class="px-4 py-12 md:px-8 md:py-24">

На телефоне у этого раздела внутренний отступ 16 px по бокам и 48 px сверху и снизу, а начиная с 768 px — 32 px и 96 px. Каждый класс с префиксом меняет только своё свойство: md:py-24 меняет внутренний отступ сверху и снизу, а бока оставляет классам px-4 и md:px-8.

Размер текста меняется так же, как вы видели на заголовке: text-4xl md:text-6xl.