Tailwindcss: grid-gap only works if grid-template(-areas) is being used

[RomkaLTU]

I'm getting this warning when running vue-cli serve:

grid-gap only works if grid-template(-areas) is being used

postcss.config.js

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),
    autoprefixer({
      add: true,
      grid: true
    }),
  ]
};

Tried tailwindcss versions 1.2 and 1.3.x
It's coming from @tailwind utilities;

Full warrning

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(3:1) grid-gap only works if grid-template(-areas) is being used

 @ ./src/main.css 4:14-156 14:3-18:5 15:22-164
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.190:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 warning  in ./src/main.css

[RomkaLTU]

Changed autoprefixer settings to:

autoprefixer({
      add: true,
      grid: false
    }),

And warnings are gone.

So it's basicaly just autoprefixer(),

[adamwathan]

Yeah Tailwind's grid utilities aren't designed to be compatible with how Autoprefixer tries to polyfill grid support (it's too limiting), so you will see warnings if you enable Autoprefixer's grid features with Tailwind.

You can either disable that feature in Autoprefixer, or disable Tailwind's grid utilities by setting all of the relevant plugins to false in your corePlugins config 👍

[Natetronn]

I just hit this as well. I set grid: false. No more errors.

[lamartire]

I just hit this as well. I set grid: false. No more errors.

grid: false disables vendor prefixes for grids. For example, if you disable this, your grid properties won't be able to work in IE and old Edge browsers.

[lamartire]

So, @adamwathan, this is not a good solution :shrug:

[adamwathan]

Tailwind's grid utilities do not support IE. If you need to support IE, I recommend using the target: 'IE11' option in Tailwind which will remove these utilities, and you can use Flexbox or write your own grid CSS that is IE-compatible.

[kb1995]

@adamwathan I am currently having problems with Safari and their lack of support for grid-gap. Have you encountered this? Should I use flexbox instead if I want to support safari

[adamwathan]

Safari does support grid-gap. I recommend opening a new discussion thread with a link to an example so it's easier to troubleshoot what the problem could be:

Open a new discussion thread