css - 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 断点？

标签： cssmedia-queriesresponsivetailwind-cssscss-mixins

Answer 1

我找到了解决这个问题的 @screen 指令：

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

一样容易

@screen md {
  // whatever
}