如何在顺风css中创建自定义媒体查询?

sg2wtvxw  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(114)

例如,此媒体查询:

@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
    @apply bg-black;
}

需要写为(如@screen):

@support blur5 {
   @apply bg-black;
}

怎么做?

qij5mzcb

qij5mzcb1#

您可以编辑tailwind.config.js文件以添加自定义介质查询。以下是一些自定义介质查询示例:

theme: {
    extend: {
      screens: {
        '2xl': '1440px',
        '3xl': '1536px',
        'custom-height-mq': { 'raw': '((min-width: 1024px) and (max-height: 830px))' },
      }
    },
  },

如果你需要更多帮助,请告诉我。

pwuypxnk

pwuypxnk2#

将类 Package 在@responsive {}指令中,将生成您使用配置中定义的断点编写的类,例如默认情况下为sm、md、lg和xl

@responsive {
  .my-class {}
}

使用默认断点,它将生成sm:my-classmd:my-class``lg:my-classxl:my-class

相关问题