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

Answer 1

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

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

一样容易

@screen md {
  // whatever
}

Answer 2

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

1. 打开你的tailwind.config.js

2. screens在您的内部更新/添加module.exports：

   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

Answer 3

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

Answer 4

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

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