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

【问题标题】：How to write Viewport width/height in Tailwind CSS如何在 Tailwind CSS 中编写视口宽度/高度
【发布时间】：2022-11-30 04:37:04
【问题描述】：

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

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

我的意思是，当我尝试实现时 w-screen 没问题
width: 100vw;
但是当我尝试实现时我应该怎么做
width: 90vw;
height: 90vh;

【问题讨论】：

标签： css tailwind-css

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用 Tailwind CSS 实用程序类将元素的宽度和高度设置为特定的视口宽度或高度。

例如，要将元素的宽度设置为 90vw，可以使用类 w-90。同样，要将元素的高度设置为 90vh，可以使用 h-90 类。

因此，在您的情况下，您可以使用以下类：

w-90
h-90

【讨论】：

不幸的是，这是行不通的。 '90' 不是 Tailwind 中的默认值，如果是，约定将映射到 rem 值。 w-96 例如是 24rem。
这是错误的。这种方式行不通。任意值应用所需单位括在方括号中，例如 w-[90vw]。

【解决方案3】：

我发现为这种情况创建一个插件很有用

将 Tailwind 配置更改为此（添加插件和默认值）

const plugin = require('tailwindcss/plugin')

// create default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});

module.exports = {

  // ...

  plugins: [
    plugin(function ({matchUtilities, theme}) {
      matchUtilities(
        {
          'w-screen': width => ({
            width: `${width}vw`
          })
        },
        { values: Object.assign(screenSizes, theme('screenSize', {})) }
      ),
      matchUtilities(
        {
          'h-screen': height => ({
            height: `${height}vh`
          })
        },
        { values: Object.assign(screenSizes, theme('screenSize', {})) }
      )
    })
  ],
}

它将允许您将 w-screen 或 h-screen 实用程序与任何 vw 或 vh 值从 0 到 95 与步骤 5 (0,5,10...95) 一起使用。没有值的 w-screen 将是 100vw（作为当前行为）

<div class="w-screen h-screen-35">
  Default width screen is still working
</div>

<div class="w-screen-50 h-screen-[15]">
  50vw width, 15vh from JIT
  No need to set h-screen-[15vh] as we already know we're working with vh units
</div>

在你的情况下它将是w-screen-90 h-screen-90

您可以使用 screenSize 键扩展可重用类的配置

module.exports = {
  theme: {
    extend: {
      screenSize: {
        33: 33 // just an example
      }
    },
  },
}

用法

<div class="w-screen-[22] h-screen-33">
  33vh from user config, 22vw from JIT
</div>

DEMO

【讨论】：