Tailwindcss: grid utility classes, IE11 and autoprefixer with grid:autoplace

[chessydk]

Hi, really appreciate your work on tailwind!

This is more of a suggestion issue:

Our project needs to support IE11 and we are using display: grid together with autoprefixers grid autoplace feature, which works great as long as we keep an eye on certain restrictions (https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/)

When we upgraded to tailwind 1.2, we got a lot of warnings from autoprefixer due to the new grid utility-classes. Autoprefixer sees the classes and issues warnings that it cannot create IE11 support from them.

Warnings like:

• "grid-gap only works if grid-template(-areas) is being used or both rows and columns have been declared and cells have not been manually placed inside the explicit grid"

• "grid-auto-flow works only if grid-template-rows and grid-template-columns are present in the same rule"

and more.

The solution for us is to disable the new grid utilities:

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

But - maybe for others that runs into this problem - here are some suggestions:

• Document this problem and the solution ?
• Disable grid classes by default ?
• Make it possible to disable grid classes by setting one overall plugin false - e.g. "grid": false

[chessydk]

You could of course claim that its an issue with autoprefixer - that it should be more "intelligent", but as it's only looking at the classes in isolation, I don't think it can do it. And if autoprefixer had a flag to disable the warnings, we would loose them for our "normal" BEM classes as well (and they are very useful).

[adamwathan]

Right now what you've done by disabling all of the grid plugins is the best solution for your particular problem. I'm planning to explore adding the ability to disable the output of IE11-incompatible classes in Tailwind entirely which would probably be the solution fix for you long-term.

Another approach (although a small bit of work) is to use the /* autoprefixer grid: off */ control comment. The bit that makes it a bit of work is that it only works inside of a block, so I've written a tiny PostCSS plugin you could use to create a phantom block that is eventually removed:

@tailwind base;
@tailwind components;

@group {
  /* autoprefixer grid: off */
  @tailwind utilities;
  @tailwind screens;
}

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')({ grid: true }),

    // This plugin finds all `@group` rules, extracts their children,
    // and deletes the left-over at-rule.
    function (css) {
      css.walkAtRules('group', (rule) => {
        rule.before(rule.nodes)
        rule.remove()
      })
    },
  ],
}

Going to close since no concrete plans to address this directly (I think the workarounds are acceptable). Will still explore the "disable IE11-incompatible" features option though 👍