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
}

Answer 2

@screen md使用 SCSS 时不起作用。同时，如果您在 中设置了
断点（键） ，则可以使用此screenstailwind.config.js

.your-selector {
  // your usual CSS
  @media (min-width: theme('screens.xl.min')) {
    // your media-queried CSS when > xl breakpoint
  }
}