我应该如何处理响应断点作为 Tailwind 中的组件？
没有 Tailwind，我曾经将断点声明为 scss mixins：
@mixin tablet-portrait {
@media (min-width: 700px) {
@content;
}
}
然后：
@include tablet-portrait {
// whatever
}
我知道 Tailwind 有响应实用程序类使用它内联为md:color-red，但我需要抽象这个断点作为组件，如上面的例子。
如何从 Tailwind 配置文件中提取 Tailwind 断点？
72
我发现 @ screen 指令，解决了这个问题：
https://tailwindcss.com/docs/functions-and-directives/#screen一样容易
@screen md {
// whatever
}
4
您可以使用和自定义项目的默认断点。
打开您的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) { ... }
}
}
4
在 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,
},
},
};
1
@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
}
}
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（39条）