Tailwind CSS - Отзывчивые точки останова как компоненты

Question

Как мне работать с отзывчивыми контрольными точками в качестве компонентов в Tailwind?

Без Tailwind я обычно объявлял контрольные точки в виде смешанных значений scss:

@mixin tablet-portrait {
  @media (min-width: 700px) {
    @content;
  }
}

Тогда:

@include tablet-portrait {
  // whatever
}

Я знаю, что у Tailwind есть отзывчивые служебные предложения, чтобы использовать его как md:color-red, но мне нужно абстрагировать эти точки останова как компоненты, как в примере выше.

Как извлечь точки останова Tailwind из конфигурации Tailwindфайл

Answer 1

Я нашел директиву @screen, которая решает этот вопрос:

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

так же просто, как

@screen md {
  // whatever
}