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

原文由 aitor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

一样容易

@screen md {
  // whatever
}

原文由 aitor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在tailwind.config.js

 const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {

  theme: {
    screens: {
      // adding xs to the rest
      xs: "475px",
      // if you did not add this, you would have only "xs"
      ...defaultTheme.screens,
    },
  },

};

原文由 Yilmaz 发布，翻译遵循 CC BY-SA 4.0 许可协议