Static GitHub Issues

[2094] tailwind example is misleading

prev: How can I remove ESLint from an existing Nuxt app?
next: detail page for SEO

I've setup tailwind according to the example, but that only works if you don't import your own files.

If you add a @import "variables.css"; or what-ever file, you'll get an error:

warning  in ./assets/css/tailwind.css

(Emitted value instead of an instance of Error) postcss-import: /Users/nappdev/projects/webviewer2/assets/css/tailwind.css:25:4:
 @import must precede all other statements (besides @charset)

 @ ./assets/css/tailwind.css 4:14-147 13:3-17:5 14:22-155
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

The only work-around I've found is to move tailwind calls into separate .css files and import them. See https://github.com/tailwindcss/tailwindcss/issues/45#issuecomment-341332235

The example should be updated so that future users can use it as a start point.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1859">#c1859</a>)</em></sub></div>