In tailwind css how to set width and height in a grid

Issue

In CSS it can be achieved by the below code but how to set that 10vw in tailwind

{
 display: grid;
 grid-template-rows: repeat(3, 10vw);
 grid-template-columns: repeat(3, 10vw);
}

Even tried grid-cols-3 max-w-10vw grid-rows-3 max-h-10vw

<div class="grid  gap-1  grid-cols-3  grid-rows-3">
  <div>1</div>
  ..........
  ..........
  <div>9</div> 
</div>

Solution

You can add new values in Tailwind configuration:

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        foo: 'repeat(3, 10vw)',
      },
      gridTemplateRows: {
        foo: 'repeat(3, 10vw)',
      }
    }
  }
}

Which allows you to do:

<div class="grid grid-cols-foo grid-rows-foo">

Or you could apply the values as arbitrary values:

<div class="grid grid-cols-[repeat(3,10vw)] grid-rows-[repeat(3,10vw)">

Answered By - Wongjn