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

Question

我应该如何在Tailwind的组件中处理响应式断点？

没有使用Tailwind的时候，我习惯将断点声明为scss混合器：

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

那么：

@include tablet-portrait {
  // whatever
}

我知道Tailwind有响应式实用类可以像md:color-red一样在内联中使用，但我需要将这些断点抽象为组件，就像上面的例子一样。

我应该如何从Tailwind配置文件中提取出断点信息？

- aitor

Answer 1

我发现了@screen指令，它解决了这个问题:

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

就像这样简单

@screen md {
  // whatever
}

更新。 如评论中提到的，Taliwind 3.2.7有不同的符号：

@media screen(sm) {
  /* ... */
}

- aitor

---

今天我在代码中使用这个很好，但是当前的文档有一个新的语法：@media screen(md) {...}。它甚至没有提到@screen指令。不确定这是否是他们在某个时候将正式化的更改，但如果您正在阅读此答案并且它无法正常工作，那可能就是原因。 - Oli

提醒一下：在我的默认 Laravel Vite 设置中，第一个（@screen md）可以正常工作。但是另一个无法正常工作。 - jakub_jo

Answer 2

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

- kissu

---

我在我的设置中发现@screen md在SCSS中运行良好，但是这个解决方案很有趣，因为它可以用于具有'max-width'断点而不更改默认断点设置：@media (max-width: theme("screens.md")) { ... }（请注意，这与完美相差1px，但在99.9％的情况下应该可以工作）。 - fredrivett

Answer 3

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

- Yilmaz

---

你可以使用“extend”属性来允许扩展屏幕尺寸，而不是拉取默认主题... - Justin

虽然这并没有真正回答主要问题。 - airtonix

Answer 4

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

1. Open your tailwind.config.js

2. Update/add screens inside your 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) { ... }
     }
   }
   

Source: https://tailwindcss.com/docs/breakpoints

- Par

---

虽然这并没有真正回答主要问题。 - airtonix