Tailwind CSS-作为组件的响应断点

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

我应该如何处理响应断点作为 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) { ... }
  }
}
Source:https://tailwindcss.com/docs/breakpoints
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
  }
}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(770)
如何在asyncssh中运行一个进程并永远观察其输出
上一篇
在CSSflexbox中 宽度:50%和flex:50%之间的区别
下一篇

相关推荐

  • css背景:Unlock the Power of CSS Backgrounds

    示例示例CSS背景是一种用于设置元素背景的CSS属性,它可以用来指定元素的背景颜色、图像或者渐变。代码示例:…

    2023-01-27 16:00:03
    0 88 29
  • css添加滚动条:标题

    CSS添加滚动条的方法如下:在CSS中添加属性:…

    2022-12-30 13:40:10
    0 28 28
  • css预处理器有哪些Sass、Less 和 Stylus

    CSS预处理器是一种用于构建CSS的工具,它可以帮助开发人员更轻松、更有效地创建和维护CSS代码。它们使用特殊的语法,可以添加变量、函数、继承和混合等功能,以帮助开发人员更轻松地编写CSS。…

    2023-01-18 11:57:40
    0 16 30
  • css属性选择器怎么用: bold;}`

    CSS属性选择器是一种CSS选择器,用于通过元素的属性和属性值来选择元素。它们可以与其他CSS选择器结合使用,以提供更多的灵活性和精确度。…

    2023-01-16 03:10:51
    0 74 63
  • vscode css提示插件:This is a title

    VSCode CSS提示插件是一款非常实用的插件,它可以在VSCode中提供CSS代码提示,让开发者更加方便地编写CSS代码。它能够提供CSS属性、属性值、CSS语法、CSS选择器等的提示,以及CSS3新特性的支持,如:flexbox、animation等。下面是使用VSCode CSS提示插件的一个示例代码:…

    2023-01-02 10:24:24
    0 46 83
  • css取消超链接下划线:Welcome to my page

    可以使用CSS的text-属性来取消超链接的下划线,代码如下:…

    2022-12-31 09:48:32
    0 97 16
  • css 时钟:时间在流逝,但美丽永恒

    CSS时钟是一种使用CSS和JavaScript创建的时钟。它可以使用CSS来控制时钟的外观,而JavaScript可以控制时钟的行为。要创建一个CSS时钟,首先需要创建一个div,并将其设置为一个圆形:…

    2023-01-29 12:42:40
    0 17 24
  • css项目:使用CSS进行网页设计

    CSS(Cascading Style Sheets)是一种用于定义HTML元素的样式表语言。它可以让你为网页中的文本、图像和其他内容指定颜色、字体、大小、位置和其他样式。…

    2023-01-19 06:32:31
    0 68 53

发表评论

登录 后才能评论

评论列表(45条)