How to use repeat and minmax in tailwind

Question

Hello I have a question how can I use repeat and minmax in grid in tailwind. I did something like this and it did not work.

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-[repeat(4, minmax(100px, 500px))]  ">
      <div className="w-32 h-32 rounded-full ">
        <Image src={Btc} alt="" />
      </div>

      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
    </div>
  );
};

Answer 1

By default, Tailwind includes grid-template-column utilities for creating basic grids with up to 12 equal width columns. You can customize these values by editing theme.gridTemplateColumns or theme.extend.gridTemplateColumns in your tailwind.config.js file.

So your tailwind config file should look like this

module.exports = {
  theme: {
    extend: {
     gridTemplateColumns: {
        // added new 4 column grid as new4
        'new4': 'repeat(4, minmax(100px, 500px))'
        }
    },
  },
  plugins: [],
}

And use like this grid-cols-new4.

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-new4  ">
      <div className="w-32 h-32 rounded-full ">
        <Image src={Btc} alt="" />
      </div>

      <p>
        Hello <span className="block ">123</span>
      </p>
      .
      .
      .
      <p>
        Hello <span className="block ">123</span>
      </p>
    </div>
  );
};

A nice example I have created here to understand more .

Answer 2

Remove any spaces inside grid-cols-[repeat(4,minmax(100px,500px))]

const DetailedAssetCard = () => { return (

  <p>
    Hello <span className="block ">123</span>
  </p>
  <p>
    Hello <span className="block ">123</span>
  </p>
  <p>
    Hello <span className="block ">123</span>
  </p>
  <p>
    Hello <span className="block ">123</span>
  </p>
  <p>
    Hello <span className="block ">123</span>
  </p>
  <p>
    Hello <span className="block ">123</span>
  </p>
</div>

); };