如何在 Tailwind CSS 中编写视口宽度/高度

Question

当我查看 Tailwind CSS 官方文档时，它说

使用 w-screen 使元素跨越视口的整个宽度。

我的意思是，当我尝试实现时，w-screen 没问题

width: 100vw;

但是当我尝试实施时我应该做什么

width: 90vw;
height: 90vh;

Answer 1

采取正确的方法取决于这些值是否会被重用。

任意值

如果有一个特定位置需要一个值（例如，90vw而不是重复该值），请选择任意值。例子：

<div class="w-[90vw] h-[90vh]"></div>

这些样式的类将自动生成。

扩展您的配置

对于可能重复的样式或应该成为设计系统一部分的样式，请扩展 Tailwind 配置：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        'screen/90': '90vh',
      },
      width: {
        'screen/90': '90vw',
      }
    }
  }
}

使用：

<div class="w-screen/90 h-screen/90"></div>