Disable CSS Grid using grid: false

[Dan503]

This issue is in reference to this comment:
#1274 (comment)

@nelson6e65 wanted to disable CSS Grid from being output into the CSS file.

This is the config he had to implement to accomplish this:

corePlugins: {
        gap: false,
        columnGap: false,
        rowGap: false,
        gridColumn: false,
        gridColumnEnd: false,
        gridColumnStart: false,
        gridRow: false,
        gridRowEnd: false,
        gridRowStart: false,
        gridTemplateColumns: false,
        gridTemplateRows: false,
        gridAutoFlow: false,
},

That is a lot of config just to completly disable CSS Grid.

Ideally you should be able to add this to your config file and that would disable all CSS Grid specific CSS from being output:

corePlugins: {
        grid: false,
},

[adamwathan]

This would be a very drastic departure from how Tailwind is currently configured because there is no grid core plugin, each CSS property gets its own core plugin.

Even the config presented above doesn't fully disable grid, since the grid class is part of the display core plugin.

If we really wanted to provide a short-hand for this sort of thing we'd probably need a whole new section of the config for it like a features key that aggregated things together. Even that is challenging though, because gap, columnGap, and rowGap are not just grid features.

I think trying to simplify this is unfortunately way more trouble than it's worth, so no plans to work on this any time soon sorry.

[nelson6e65]

At least can be this in docs? I had to figure out reading too much

[adamwathan]

It is in the docs, there's a "Disabling" section at the bottom of every utility page:

https://tailwindcss.com/docs/grid-template-rows/#disabling

Out of curiousity what is your use case for disabling the grid utilities? Is it just because you need to support older browsers and don't want to use the classes by accident or something else?

[nelson6e65]

It is in the docs, there's a "Disabling" section at the bottom of every utility page:

Yes, in each page. I had to figured out related to grid pages. At least one is not documented (currently in mobile, but in referenced issue I commented about)

Out of curiousity what is your use case for disabling the grid utilities? Is it just because you need to support older browsers and don't want to use the classes by accident or something else?

I want to use only flex for my grid system. And wanted to reduce the resulting bundle by removing unused features, but keep in the config file in case I have to turn on back.