Estoy usando Vue3 con TailwindCSS y quiero crear una cuadrícula con una clase dinámica grid-cols-{n} . Sé que TailwindCSS admite hasta 12 columnas de forma predeterminada, pero no puedo personalizar el tema porque la cantidad de columnas es completamente dinámica.
Dado el siguiente ejemplo simple de HTML/Js
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> Este código funciona bien si la cantidad de elementos por amountOfItemsPerRow es menor o igual a 12; de lo contrario, el CSS no funciona.
¿Tengo que escribir código para configurar CSS simple para resolver esto o hay una solución Tailwind dinámica?
Otro enfoque:
Basado en los documentos , traté de reemplazar la línea
container.classList.add(`grid-cols-${amountOfItemsPerRow}`);con
container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);para llegar a un enfoque "nativo", pero eso no ayudó.
Crear un nombre de clase dinámico con Tailwindcss es fácil. Dentro de [ y ] , puede agregar Dynamic Class con TailwindCSS
const amountOfRows = 16; const amountOfCellsPerRow = 16; const container = document.getElementById("container"); for (let rowIndex = 0; rowIndex < amountOfRows; rowIndex++) { for (let columnIndex = 0; columnIndex < amountOfCellsPerRow; columnIndex++) { const cell = document.createElement("div"); cell.innerText = rowIndex + "|" + columnIndex; container.appendChild(cell); } } container.classList.add(`grid-cols-[${amountOfCellsPerRow}]`)Para más detalles aquí
No puedes hacer eso con TailwindCSS simple.
Lo que sugiere @Ajay Raja no funcionará porque solo funciona con JIT (justo a tiempo); por lo tanto, antes de compilar la aplicación, puede usar valores arbitrarios, pero una vez que haya compilado e implementado su paquete, no puede ser dinámico. Solo funciona durante el tiempo de compilación; entonces, si está usando un CDN, no lo logrará
Lo que puede hacer es echar un vistazo a la implementación de la clase y configurar algunos oyentes de JavaScript para establecer dinámicamente el atributo de estilo:
Desde aquí puedes ver la implementación de .grid-columns-12 .
.grid-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }Entonces desde JS puedes hacer algo de la siguiente manera:
function setDynamicColumns(cols) { document .querySelector('#elementWithDynamicGrid') .style['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))` }No soy un experto en Vue, pero puede establecer un enlace de datos bidireccional como lo haría en Angular o React.
que estabas haciendo aqui
container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`) No funcionaba porque estaba aplicando una directiva de style en el atributo class
Otro enfoque para abordar este problema sería generar la cantidad necesaria de clases en el momento de la compilación para que luego pueda usarlas de manera segura en el tiempo de ejecución:
Si echas un vistazo a los documentos aquí
Puede agregar sus propios modificadores de cuadrícula personalizados modificando el archivo tailwind.config.js .
module.exports = { theme: { extend: { gridTemplateColumns: { // Simple 16 column grid '16': 'repeat(16, minmax(0, 1fr))', } } } }Entonces puede agregar una función que genere una cantidad razonable de columnas allí de la siguiente manera:
//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 } } } } Tenga en cuenta que al purgar sus compilaciones tailwindCSS debe indicar que debe mantener todas las clases grid-columns-* ya que el purgador no puede adivinar que las va a usar.