How to extend grid-template-columns in v4?

[vladbesson]

Hey! In v3 it works like this:

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

        // Complex site-specific column configuration
        'footer': '200px minmax(900px, 1fr) 100px',
        
        '1fr': 'repeat(1, 1fr)',
        '2fr': 'repeat(2, 1fr)',
        '3fr': 'repeat(3, 1fr)',
        '4fr': 'repeat(4, 1fr)',
        '5fr': 'repeat(5, 1fr)',
        '6fr': 'repeat(6, 1fr)',
        '7fr': 'repeat(7, 1fr)',
        '8fr': 'repeat(8, 1fr)',
        '9fr': 'repeat(9, 1fr)',
        '10fr': 'repeat(10, 1fr)',
        '11fr': 'repeat(11, 1fr)',
        '12fr': 'repeat(12, 1fr)'
      }
    }
  }
}

How can we achieve the same in v4? Thanks!

[vladbesson]

In addition, we also need to safelist them. In V3, we did this in the tailwind.config.js file as well:

safelist: [
    // Gap classes are applied dynamically based from a CMS — safelist needed to ensure they're included in the build
    { pattern: /gap-/, variants: ['xl', 'lg', 'md'] },

    // Grid columns classes are applied dynamically based from a CMS — safelist needed to ensure they're included in the build
    { pattern: /grid-cols-/, variants: ['xl', 'lg', 'md'] }
  ]

[FragsterAt]

In addition, we also need to safelist them.

Safelisting is available with @source inline: https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-with-ranges

[vladbesson]

Yes, but ignoring extended variants like grid-cols-2fr, md:grid-cols-2fr, etc

[FragsterAt]

try @source inline("{md:,}grid-cols-{1..16}");

[vladbesson]

I found the way, I extended grid-cols- in @theme like this

@theme inline {
  ...
  --grid-cols-1fr: repeat(1, 1fr);
  --grid-cols-2fr: repeat(2, 1fr);
  --grid-cols-3fr: repeat(3, 1fr);
  --grid-cols-4fr: repeat(4, 1fr);
  --grid-cols-5fr: repeat(5, 1fr);
  --grid-cols-6fr: repeat(6, 1fr);
  --grid-cols-7fr: repeat(7, 1fr);
  --grid-cols-8fr: repeat(8, 1fr);
  --grid-cols-9fr: repeat(9, 1fr);
  --grid-cols-10fr: repeat(10, 1fr);
  --grid-cols-11fr: repeat(11, 1fr);
  --grid-cols-12fr: repeat(12, 1fr);
}

And after safelisting it like this

@source inline("{md:,lg:,xl:,}grid-cols-{1fr,2fr,3fr,4fr,5fr,6fr,7fr,8fr,9fr,10fr,11fr,12fr}");

[FragsterAt]

also @source inline("{md:,lg:,xl:,}grid-cols-{1fr,2fr,3fr,4fr,5fr,6fr,7fr,8fr,9fr,10fr,11fr,12fr}"); has shorter equivalent @source inline("{md:,lg:,xl:,}grid-cols-{1..12}fr");

[vladbesson]

We need exactly grid-template-columns: repeat(2, 1fr) but grid-cols-2 adds minmax inside the value which breaks our grids — grid-template-columns: repeat(2, minmax(0, 1fr))

[vladbesson]

Thanks for the shorter version!

[FragsterAt]

which breaks our grids

Can you provide a sample (on tailwind playground or codepen)?

[vladbesson]

It would be hard to reproduce our case, I will try later

[vladbesson]

Actually this is not working:

@theme inline {
  ...
  --grid-cols-1fr: repeat(1, 1fr);
  --grid-cols-2fr: repeat(2, 1fr);
  --grid-cols-3fr: repeat(3, 1fr);
  --grid-cols-4fr: repeat(4, 1fr);
  --grid-cols-5fr: repeat(5, 1fr);
  --grid-cols-6fr: repeat(6, 1fr);
  --grid-cols-7fr: repeat(7, 1fr);
  --grid-cols-8fr: repeat(8, 1fr);
  --grid-cols-9fr: repeat(9, 1fr);
  --grid-cols-10fr: repeat(10, 1fr);
  --grid-cols-11fr: repeat(11, 1fr);
  --grid-cols-12fr: repeat(12, 1fr);
}

The old ways with extend in js config is still working with v4, all I needed was just safelist them

[FragsterAt]

By the way, you can generate set of classes with functional utilites https://tailwindcss.com/docs/adding-custom-styles#functional-utilities

Something like https://play.tailwindcss.com/EhZ9eExoQu?file=css

[wongjn]

The correct namespace is --grid-template-columns: https://play.tailwindcss.com/Sg6Ir1uxUE?file=css

[FragsterAt]

this may be useful: generate utilites + safelisting in one place
https://play.tailwindcss.com/qc5Qd0AnRy?file=css