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

By tailwind 您可以使用和自定义项目的默认断点。

打开你的tailwind.config.js

Update/add 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

@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
  }
}

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

Tailwind CSS - 响应断点作为组件

Tailwind CSS - Responsive breakpoints as components

css

media-queries

responsive

scss-mixins

tailwind-css