search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

Grid warnings on compile #454

Closed ericdfields closed 4 years ago

ericdfields commented 4 years ago

I'm upgrading from tailwind 1.0 to 1.2 and attempting to use grids.

I'm getting the following warnings when I compile:

 WARN  in ./assets/styles.css                                                                                                                                    friendly-errors 10:52:30

Module Warning (from ./node_modules/postcss-loader/src/index.js):                                                                                                friendly-errors 10:52:30
Warning

(5:1) Can not prefix grid-column-end (grid-column-start is not found)
                                                                                                                                                                 friendly-errors 10:52:30
 @ ./assets/styles.css 4:14-158 14:3-18:5 15:22-166
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                 friendly-errors 10:52:30

 WARN  in ./assets/styles.css                                                                                                                                    friendly-errors 10:52:30

Module Warning (from ./node_modules/postcss-loader/src/index.js):                                                                                                friendly-errors 10:52:30
Warning

(5:1) Can not prefix grid-row-end (grid-row-start is not found)
                                                                                                                                                                 friendly-errors 10:52:30
 @ ./assets/styles.css 4:14-158 14:3-18:5 15:22-166
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                 friendly-errors 10:52:30

 WARN  in ./assets/styles.css                                                                                                                                    friendly-errors 10:52:30

Module Warning (from ./node_modules/postcss-loader/src/index.js):                                                                                                friendly-errors 10:52:30
Warning

(5:1) grid-auto-flow works only if grid-template-rows and grid-template-columns are present in the same rule
                                                                                                                                                                 friendly-errors 10:52:30
 @ ./assets/styles.css 4:14-158 14:3-18:5 15:22-166
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                 friendly-errors 10:52:30

 WARN  in ./assets/styles.css                                                                                                                                    friendly-errors 10:52:30

Module Warning (from ./node_modules/postcss-loader/src/index.js):                                                                                                friendly-errors 10:52:30
Warning

(5:1) grid-auto-flow: dense is not supported by IE
                                                                                                                                                                 friendly-errors 10:52:30
 @ ./assets/styles.css 4:14-158 14:3-18:5 15:22-166
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                 friendly-errors 10:52:30

 WARN  in ./assets/styles.css                                                                                                                                    friendly-errors 10:52:30

Module Warning (from ./node_modules/postcss-loader/src/index.js):                                                                                                friendly-errors 10:52:30
Warning

(5:1) grid-gap only works if grid-template(-areas) is being used
                                                                                                                                                                 friendly-errors 10:52:30
 @ ./assets/styles.css 4:14-158 14:3-18:5 15:22-166
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                 friendly-errors 10:52:30
ℹ Waiting for file changes                                                                                                                                                       10:52:30
ℹ Memory usage: 573 MB (RSS: 1.27 GB)

I've updated both the theme and variant objects in my config file, appending the new properties found here and here, respectively.

As far as I can tell, that should be it. The grid demo I'm working on in my app looks fine, so I'm not sure what those warnings are trying to tell me.

Any help on removing these warnings would be great. Thank you.

adamwathan commented 4 years ago

This is because Nuxt preconfigures Autoprefixer to try and polyfill CSS Grid support for IE11, but Tailwind's CSS Grid utilities aren't compatible with IE11.

If you want to use our CSS Grid stuff I would recommend disabling the CSS Grid polyfill in Autoprefixer by setting grid to false in your Autoprefixer configuration:

https://github.com/postcss/autoprefixer#options

ericdfields commented 4 years ago

Thanks, Adam. That did the trick 👍