如何在Tailwind CSS中设置非100vw/vh的视口宽度与高度？

• 直接使用任意值语法
  Tailwind支持用方括号包裹自定义值，直接写你需要的视口单位样式即可，无需额外配置：

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

  这种写法会直接生成对应的CSS：width: 90vw; height: 90vh;，适合偶尔使用的场景。

• 自定义可复用工具类
  如果这个尺寸需要在项目中多次使用，推荐在tailwind.config.js里扩展主题，将其转为全局可用的类：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      extend: {
        width: {
          '90vw': '90vw',
        },
        height: {
          '90vh': '90vh',
        },
      },
    },
  }
  

  配置完成后，就能像使用内置类一样调用：

  <div class="w-90vw h-90vh bg-gray-200"></div>
  

内容的提问来源于stack exchange，提问作者chagatai