Сделайте заголовки и типографику попутным ветром отзывчивыми

Question

Я хочу сделать мои заголовки h1, h2, h3 et c отзывчивыми. Я думал, что мог бы сделать что-то вроде:

h1 {
@apply text-lg lg:text-2xl xl:text-3xl;
}

Но тогда я получаю ошибку.

Как мне решить эту проблему лучше всего?

Answer 1

К сожалению, вы не можете сделать это таким образом:

Из документов попутного ветра:

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

https://tailwindcss.com/docs/functions-and-directives/

Вместо этого у вас есть @screen для это. Так что в вашем случае это будет.

h1 {
   @apply text-lg;

   @screen lg {
      @apply text-2xl;
   }

   @screen xl {
      @apply text-3xl;
   }
}

Или

h1 {
   @apply text-lg;
}

@screen lg {
   h1 {
      @apply text-2xl;
   }
}

@screen xl {
   h1 {
      @apply text-3xl;
   }
}