How to Use repeat and minmax in Tailwind CSS

How to Use `repeat` and `minmax` in Tailwind CSS

Tailwind CSS provides powerful utilities to create flexible grid layouts using grid-cols-*. However, when you need more advanced grid setups using repeat and minmax, you might run into syntax issues.

Using `repeat` and `minmax` in Tailwind

You can directly use the grid-cols-[repeat(4,minmax(100px,500px))] syntax in Tailwind CSS. However, make sure there are no spaces inside the brackets. Here’s an example:

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

Alternative Approach: Extending Tailwind Config

If you frequently use a specific repeat and minmax pattern, you can extend Tailwind’s configuration to create a custom utility:

Update `tailwind.config.js`

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

Use the Custom Utility in Your JSX

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

FAQs

1. Why is `repeat(4, minmax(100px, 500px))` not working in Tailwind?

Make sure that there are no spaces inside the brackets when using this syntax in a Tailwind class.

2. How do I make this grid responsive?

You can use Tailwind’s responsive utilities like md:grid-cols-2 or lg:grid-cols-4 to adjust column counts at different breakpoints.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[repeat(4,minmax(100px,500px))]">

3. Can I use `minmax` inside a predefined Tailwind grid class?

No, predefined classes like grid-cols-4 use fixed fractions (1fr). Use grid-cols-[...] for advanced custom layouts.