Question

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

在没有Tailwind的情况下，我曾经将断点声明为scss mixins：

@mixin tablet-portrait {
  @media (min-width: 700px) {
    @content;
  }
}

然后：

@include tablet-portrait {
  // whatever
}

我知道Tailwind具有响应实用程序类，可以将其作为md:color-red内联使用，但是如上例所示，我需要将此Breakpoins作为组件进行抽象。

如何从Tailwind配置文件中提取Tailwind断点？

Answer 1

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

打开您的tailwind.config.js
在“ module.exports”内部更新/添加“屏幕”

主题：{ 屏幕：{ 'sm'：'640px'， // => @media（最小宽度：640像素）{...}

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }

来源：https://tailwindcss.com/docs/breakpoints

Answer 2

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

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

简单

@screen md {
  // whatever
}

Answer 3

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

Tailwind CSS-响应断点作为组件

3 个答案: