24 columns instead of 12 columns

[iamshrikantjha]

It's just a suggestion or in case you guys have any workaround for using 24 columns system instead of 12 columns like antdesign in tailwindcss it will give developers granular control over their designs. I mean if you have any workaround for it do let me know.

[NovusOpus]

You can add 24 or any number of columns you need, by extending your gridTemplateColumns in the theme configuration, inside your tailwind.config.js, like this:

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

And then you can use the grid-cols-24 where you need it.

More info: Tailwind CSS Docs

[iamshrikantjha]

Thanks that would work but how about 24 level system with w-12/24 or w-a/24. Here a could be any value 1 to 23.

[sntran]

You would need to extend them as well.

Something like:

const columns = {};
for (let i = 1; i<=24; i++ {
  const key = `${i}/24`;
  columns[key] = `${100/24} * i`;
}

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

[VadBe]

const generateGrid = (size) => {
  const gridColumn = {};
  const gridTemplateColumns = {};
  const gridRow = {};
  const gridTemplateRows = {};
  const gridRowStart = {};
  const gridRowEnd = {};
  const gridColumnStart = {};
  const gridColumnEnd = {};
  for (let i = 1; i <= size; i++) {
    gridRow[`span-${i}`] = `span ${i} / span ${i}`;
    gridColumn[`span-${i}`] = `span ${i} / span ${i}`;
    gridTemplateColumns[i] = `repeat(${i}, minmax(0, 1fr))`;
    gridTemplateRows[i] = `repeat(${i}, minmax(0, 1fr))`;
    gridRowStart[i] = `${i}`;
    gridRowEnd[i] = `${i}`;
    gridColumnStart[i] = `${i}`;
    gridColumnEnd[i] = `${i}`;
  }
  return {
    gridColumn,
    gridTemplateColumns,
    gridRow,
    gridTemplateRows,
    gridRowStart,
    gridRowEnd,
    gridColumnStart,
    gridColumnEnd,
  };
}

module.exports = {
  theme: {
    extend: {
      ...generateGrid(24),
    }
  }
}

[sebastiaanluca]

And as a Tailwind plugin:

TailwindGridPlugin.ts:

import plugin from 'tailwindcss/plugin'

const generateGrid = (size: number) => {
    const gridColumn: Record<string, string> = {}
    const gridTemplateColumns: Record<number, string> = {}
    const gridColumnStart: Record<number, string> = {}
    const gridColumnEnd: Record<number, string> = {}

    for (let i = 1; i <= size; i++) {
        gridColumn[`span-${i}`] = `span ${i} / span ${i}`
        gridTemplateColumns[i] = `repeat(${i}, minmax(0, 1fr))`
        gridColumnStart[i] = `${i}`
        gridColumnEnd[i] = `${i}`
    }

    return {
        gridColumn,
        gridTemplateColumns,
        gridColumnStart,
        gridColumnEnd,
    }
}

export default plugin(function ({ matchUtilities, theme }) {
    const gridExtensions = generateGrid(theme('extendedGridColumns'))

    matchUtilities(
        { 'grid-cols': (value) => ({ gridTemplateColumns: value }) },
        { values: gridExtensions.gridTemplateColumns },
    )

    matchUtilities(
        { col: (value) => ({ gridColumn: value }) },
        { values: gridExtensions.gridColumn },
    )

    matchUtilities(
        { 'col-start': (value) => ({ gridColumnStart: value }) },
        { values: gridExtensions.gridColumnStart },
    )

    matchUtilities(
        { 'col-end': (value) => ({ gridColumnEnd: value }) },
        { values: gridExtensions.gridColumnEnd },
    )
}, {
    theme: {
        extendedGridColumns: 24,
    },
})

tailwind.config.js:

import type { Config } from 'tailwindcss'
import gridExtensionPlugin from './plugins/TailwindGridPlugin.ts'

export default {
    // ...other config
    theme: {
        // Optional, allows you to change the max columns
        // extendedGridColumns: 32,
    },
    plugins: [tailwindGridPlugin],
} satisfies Config

[adamwathan]

Fun aside — in v4 you don't have to think about this stuff, all of the grid utilities support any number from 0 to infinity out of the box 👍