如何在Tailwind CSS中设置网格的10vw宽高尺寸

要实现你需要的效果，有两种简单可行的方式：

方式一：用Tailwind自定义值语法（无需额外配置） #

Tailwind支持通过方括号语法直接传入任意CSS值，完全对应你原生CSS的写法，直接把网格行列的规则写在类名里即可：

<div class="grid gap-1 grid-cols-[repeat(3,10vw)] grid-rows-[repeat(3,10vw)]">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

这个写法等价于你给出的原生CSS代码：

{
  display: grid;
  grid-template-rows: repeat(3, 10vw);
  grid-template-columns: repeat(3, 10vw);
  gap: 0.25rem; /* 对应Tailwind的gap-1 */
}

方式二：自定义可复用工具类（适合多次使用场景） #

如果这个网格样式需要在项目中重复使用，可以在tailwind.config.js里添加自定义工具类，避免重复书写方括号内容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      gridTemplateColumns: {
        '3-10vw': 'repeat(3, 10vw)',
      },
      gridTemplateRows: {
        '3-10vw': 'repeat(3, 10vw)',
      },
    },
  },
  plugins: [],
}

配置完成后，在HTML里直接使用自定义类名即可：

<div class="grid gap-1 grid-cols-3-10vw grid-rows-3-10vw">
  <!-- 网格项内容 -->
</div>

你之前尝试无效的原因 #

• grid-cols-3/grid-rows-3是让网格轨道均分容器可用空间，并非固定10vw尺寸；
• max-w-10vw/max-h-10vw是设置元素的最大宽高，和网格轨道的尺寸规则无关，所以无法实现需求。

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