media-queries - Tailwind CSS - 作为组件的响应式断点

Question

我应该如何处理作为 Tailwind 组件的响应式断点？

没有 Tailwind，我曾经将断点声明为 scss mixins:

@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
}