How to create a TailwindCSS grid with a dynamic amount of grid columns?

I'm using Vue3 with TailwindCSS and want to create a grid with a dynamic grid-cols-{n} class. I know that TailwindCSS supports up to 12 columns by default but I can't customize the theme because the amount of columns is completely dynamic.

Given the following plain HTML / Js example

const amountOfItemsPerRow = 16;

const container = document.getElementById("container");

for (let i = 0; i < amountOfItemsPerRow; i++) {
  const item = document.createElement("div");
  item.innerText = i;
  container.appendChild(item);
}

container.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12

<script src="https://cdn.tailwindcss.com"></script>

<div id="container" class="grid"></div>

This code works fine if amountOfItemsPerRow is smaller or equal than 12, otherwise the CSS is broken.

Do I have to write code to setup plain CSS solving this or is there a dynamic Tailwind solution?

Another approach:

Based on the docs I tried to replace the line

container.classList.add(`grid-cols-${amountOfItemsPerRow}`);

with

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);

to come up with a "native" approach but that didn't help.

Solution

You cannot do that with plain TailwindCSS.

What @Ajay Raja suggests won't work because it only works with JIT (just-in-time); so previously to compiling the application you can use arbitrary values but once you've compiled and deployed your bundle that cannot be dynamic. It only works during build-time; so if you're using a CDN you'll not make it

What you can do is taking a look at the implementation of the class and set up some javascript listeners to dynamically set the style attribute:

From here you can see the implementation of .grid-columns-12.

.grid-columns-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

So from JS you can do something as follows:

function setDynamicColumns(cols) {
  document
    .querySelector('#elementWithDynamicGrid')
    .style['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`
}

I am not a Vue expert, but you could set two-way databinding like you would on Angular or React.

What you were doing here

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`)

Was not working because you were applying a style directive into the class attribute

Another approach to tackle this problem would be to generate the necessary amount of classes at build time so then you can use them safely at runtime:

If you take a look at the docs here

You can add your own custom grid modifiers by modifying the tailwind.config.js file.

module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {        
      // Simple 16 column grid        
      '16': 'repeat(16, minmax(0, 1fr))',     
      }    
    }  
  }
}

So you can add a function that generates a reasonable number of columns there as follows:

//tailwind.config.js
function generateGridColumns(lastValue) {
   let obj = {}
   for(let i = 13; i < lastValue; i++) {
     obj[`${i}`] = `repeat(${i}, minmax(0, 1fr))`
   }
   return obj
}


module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {
         ...generateGridColumns(100) // This generates the columns from 12 until 100
      }    
    }  
  }
}

Please bear in mind that when purging your tailwindCSS builds you need to indicate to keep all grid-columns-* classes since the purger cannot guess that you're going to use them