Nuxt.js: tailwind example is misleading

[dotnetCarpenter]

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)}

[adamwathan]

The example does say "if using a preprocessor", so if you're not using a preprocessor (such as Less, Sass, or Stylus), that won't work.

I can change that in the Tailwind documentation and PR it to this repo as well if you have any ideas on how to make it more clear.

[dotnetCarpenter]

I use PostCSS.... @adamwathan I don't understand your comment.

[dotnetCarpenter]

@adamwathan Yes you're right. Which is also what I have done. The issue is that the example does not and I bet that most nuxt users, like me, will copy the example before they google and find the work-around. I've updated the example to reflect the work-around...

[adamwathan]

PostCSS is not a preprocessor in the same way Less, Sass and Stylus are; it calls itself a "post-processor" (although admittedly Tailwind and many other plugins abuse it to the point that it's more of a preprocessor).

If you are using a normal preprocessor, your import statements will be processed before PostCSS ever runs, so any of those imports will already be inlined.

Say you have this Less code:

// In my-component.less
.my-component {
    color: blue;
}

// In main.less
@tailwind preflight;

@import "my-component";

@tailwind utilities;

Running Less against this will output this:

@tailwind preflight;

.my-component {
    color: blue;
}

@tailwind utilities;

PostCSS runs against that output, so now all of the @import statements are already gone, and everything will work.

That's what we mean when we say "or if using a preprocessor"; running Less, Sass or Stylus on some code first to generate the CSS that's going to be fed into PostCSS.

[dotnetCarpenter]

I'm sorry. Perhaps I'm misunderstanding what postcss-import does. But the README states:

PostCSS plugin to transform @import rules by inlining content.

[adamwathan]

No you're understanding correctly; that's exactly what it does, but like mentioned in the conversation on the Tailwind repo, that plugin is very strict about the CSS spec and will not process imports that appear after any non-imports in your CSS.

The example Tailwind file explicitly says "if using a preprocessor" because we know that file won't work as-is with post-css-import. The only way post-css-import works is if your imports are the first lines in the file, just like the error message says when it fails.

[dotnetCarpenter]

@adamwathan It sounds like we're agreeing. Could you take a look at PR #2095 and check that I got it right? Note, that it doesn't seem to make a difference whether or not, the postcss-import comes before or after tailwindcss in the plugin list.

[pi0]

@dotnetCarpenter Thanks for PR :) So can we safely close this issue?

[dotnetCarpenter]

@pi0 yes. But... I'm having second thoughts about PR #2095. Since nuxt is suppose to be easy to setup and run, wouldn't we assume that 99% would use tailwind with PostCSS import because their entire project is build around using the build-in PostCSS configuration? In that case, a user need to create the files in #2095 and setup postcss.config.js with postcss-import. I'm not sure that is evident in the comments.

I don't know the average user and don't want to make the call. But feel free to close this issue.

[pi0]

@dotnetCarpenter What if we make a nuxt module for easier integration? Would be happy helping on that.

[dotnetCarpenter]

@pi0 sounds good. But I don't have time until after the 22nd. Got two deadlines coming up.

[dotnetCarpenter]

@pi0 is there a place where I can ping you directly when I start work on the tailwind nuxt module?

[pi0]

Sure. I've sent you an invitation to our slack group.

[qm3ster]

@pi0 are you guys hiding from me in a slack -_-

[dotnetCarpenter]

@qm3ster no. My romance with tailwindcss was short. No one on my team want to use or support it, so I moved on to using less. I don't think less is better, on the contrary, but my team is using it, so I have to. In short, I don't use tailwindcss anymore and won't be developing a tailwindcss module for nuxt.

[qm3ster]

Yeah, well I bet they still have a slack and are hiding from me there.

[pi0]

@qm3ster Invitation is already sent to your public email (hidden)" BTW ;)

[qm3ster]

1. Thanks!
2. I wish I had a dedicated "public" email. Someday I will sort this mess out.

[rajeevbbqq]

How I solved is,

on nuxt.config.js

var tailwindcss = require('tailwindcss');

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'autovert',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Autovert Lease Engine' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [
    '~/assets/style.css'
  ],
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' }, 
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extractCSS: true ,

    postcss: [
      tailwindcss('node_modules/.bin/tailwind.js'), // <= path to tailwind config file
      require('autoprefixer'),
    ],

    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

and i created style.css on assets folder and inserted

@tailwind preflight;
@tailwind components;
@tailwind utilities;

When a change is detected on tailwind.js, nuxt automatically recompile like a breeze

[dotnetCarpenter]

That is great if you don't want to change anything in tailwind.js. if you
do, then you have follow the example and do .node_modules/.bin/tailwind init.

On Mar 16, 2018 11:38 AM, "Rajeev" [e-mail] wrote:

How I solved is,

on nuxt.config.js

build: {
   //
    postcss: [
           tailwindcss('node_modules/.bin/tailwind.js'),
            require('autoprefixer'),
   ],
  //
}

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/2094#issuecomment-373674002, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AACq8_gXRNu88Uxp0wINdsZuHP8oGXN3ks5te5YtgaJpZM4QcKAB
.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.