Home

Issue: 2094

tailwind example is misleading

[issue link]

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.

This question is available on Nuxt.js community (#c1859)