Tailwind CSS - 响应式断点作为组件答案

【问题标题】：Tailwind CSS - Responsive breakpoints as componentsTailwind CSS - 响应式断点作为组件
【发布时间】：2019-08-28 07:16:13
【问题描述】：

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

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

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

然后：

@include tablet-portrait {
  // whatever
}

我知道 Tailwind 具有响应式实用程序类，可以将其作为 md:color-red 内联使用，但我需要将此断点抽象为组件，如上例所示。

我应该如何从 Tailwind 配置文件中提取 Tailwind 断点？

【问题讨论】：

标签： css media-queries responsive tailwind-css scss-mixins

【解决方案1】：

在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,
    },
  },
  
};

【讨论】：

【解决方案2】：

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

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

【讨论】：

我发现 @screen md 在我的设置中的 SCSS 中工作正常，但这个解决方案很有趣，因为它可以用于在不更改默认断点设置的情况下设置 max-width 断点：@987654326 @（请注意，这与完美相差 1px，但应该在 99.9% 的情况下有效）。

【解决方案3】：

通过顺风您可以为您的项目使用和自定义默认断点。

打开你的tailwind.config.js

在您的module.exports 中更新/添加screens：

theme: {
  screens: {
    'sm': '640px',
    // => @media (min-width: 640px) { ... } 

    'md': '768px',
    // => @media (min-width: 768px) { ... }

    'lg': '1024px',
    // => @media (min-width: 1024px) { ... }

    'xl': '1280px',
    // => @media (min-width: 1280px) { ... }
  }
}

来源：https://tailwindcss.com/docs/breakpoints

【讨论】：

【解决方案4】：

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

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

就这么简单

@screen md {
  // whatever
}

【讨论】：