Tailwindcss: How to webpack on VueJS project?

[HapLifeMan]

Hey,

I initialized a VueJS project with webpack and everything works perfectly.
Now I want to use Tailwind but I don't know how to merge webpack files...
I saw your webpack-starter for Tailwind and it works well as it is.
Where should I have Tailwind files and additional config to work with webpack?

I have a build folder with webpack.base.conf.js, webpack.dev.conf.js...

Thanks by advance for your help 🙌🏻

[jarod51]

Exactly the same troubles for me :)

I 'm trying to start a new project with tailwind css which i find very cool.

So i'm "vue init webpack toto" my project and then follow the documentation but nothing works

I created my ./tailwind.js , created a ./postcss.conf.js and after i don't really now where to insert calls to plugins and rules in webpack (is it in ./build/webpack.base.conf.js ?)
"Bref"... i am a little bit lost and need your light :)

Thank you community :)

[adamwathan]

Hey, I don't know a ton about this but I did manage to get an example project working.

Here's the repo: https://github.com/adamwathan/vue-cli-tailwind-example

Tricks for me were:

1. Install Tailwind and add it to .postcssrc.js file:

   https://github.com/adamwathan/vue-cli-tailwind-example/blob/master/.postcssrc.js

2. Create a global CSS file under /src/styles/ and stuff the @tailwind stuff in there:

   https://github.com/adamwathan/vue-cli-tailwind-example/blob/master/src/styles/main.css

3. Import that CSS file in the top level Vue component for the app:

   https://github.com/adamwathan/vue-cli-tailwind-example/blob/master/src/App.vue#L25

I didn't touch anything else at all, so the other style block you see there for example is just the default one that ships with the template. You'd likely want to remove that but I didn't want to make drastic changes.

[curtisblackwell]

Possibly helpful for those using a pre-processor as well:

I had trouble figuring out using a global Sass file with vue-cli, but you basically just have to do what Adam did above, but also

1. yarn install -D node-sass / npm install -D node-sass
2. In App.vue use <style src="./styles/main.scss" lang="scss"></style>.

[HapLifeMan]

Thank you @adamwathan ❤️
I'll try to add PurifyCSS Extended or PurgeCSS and that will be perfect :)

[rathesDot]

@adamwathan Any reason why you did not simply @tailwind in the main App.vue file?

For a current project I'm working on, I simply did following steps:

1. vue init webpack awesome-project
2. cd awsome-project && yarn
3. yarn add tailwindcss

And then created the tailwind config as explained in the docs ./node_modules/.bin/tailwind init tailwind-config

And then I updated the .postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": [
    // to edit target browsers: use "browserlist" field in package.json
    require('postcss-import')(),
    require('tailwindcss')('./tailwind-config.js'),
    require('autoprefixer')
  ]
}

Until here, this is the same way as @adamwathan did.

But now I simply added both tailwind tags into App.vue as this will be the entry point for the Vue-App ...

So my App.vue looks like this:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
@tailwind preflight;


@tailwind utilities;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

No need for an extra styles.css that needs to be added or something like that ...

[cesaramirez]

Here other example using Vue cli webpack

https://github.com/cesaramirez/popular-layouts

Steps:

1. Install PostCSS Loader

2. Install TailwindCSS, create file config and tailwind to .postcssrc.js file
   https://github.com/cesaramirez/popular-layouts/blob/master/.postcssrc.js

var tailwindcss = require('tailwindcss');

module.exports = {
  "plugins": [
    // to edit target browsers: use "browserslist" field in package.json
    tailwindcss('tailwind.js'),
    require('autoprefixer'),
  ]
}

1. Add global css fileapp.scss with Tailwind Utilities in src/scss
   https://github.com/cesaramirez/popular-layouts/blob/master/src/assets/scss/app.scss

2. Finally in App.vue file import scss file

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="sass">
  @import "~styles/app";
</style>

Now you can use Tailwind globally in your project.

[adamwathan]

@adamwathan Any reason why you did not simply @tailwind in the main App.vue file?

Never thought to try it, that's cool!

[jarod51]

@rathesDot @adamwathan I don't think it's reasonable to put tailwind in App.vue as you may have a lot of styles ! Big App.vue ahead !

[rathesDot]

Not sure, but most of my projects App.vue look like

<template>
  <div>
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

or if not a SPA, then with a single main compnenent.

The styles are then just the base styles ... so it makes sense to add tailwind in this component as well ... I usually do not have any external stylesheets at all ...

// EDIT: One should decided per project, I think there is no right or false ... So @HapLifeMan has a lot of ways to solve his problem and he can choose a way depending on what feels better for his goals :-)

[adamwathan]

Closing this as it seems like we've got it figured out.

[peterfox]

Only issue I've found with this is you can't use anything like @apply in the vue style blocks as it tries to parse it and throws an error. It's most likely because Vue can do things like creating scoped styles for components.

[majksner]

None of these solutions doesn't work anymore. Probably Webpack template for Vue CLI was updated.

This is the error I get:

Unexpected string

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue 4:14-307 13:3-17:5 14:22-315
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

[cschweda]

I'm using Tailwind with the latest vue-cli webpack template -- no issues.

Here's my .postcssrc.js file:

module.exports = {
  plugins: [
    require("postcss-import")(),
    require("tailwindcss")("./tailwind-config.js"),
    require("autoprefixer")(),
    require("postcss-font-magician")(),
    require("postcss-url")()
  ]
};

Everything works fine.

[chasegiunta]

As mentioned by @peterfox earlier, everything seems to work awesomely except that with this setup, we can't use @apply in vue style blocks without re-importing @tailwind utilities or importing our main.css again (which imports @tailwind utilities). Bloat! Anyone figured this out?

[adamwathan]

Hey @chasegiunta, see discussion here:

https://github.com/tailwindcss/tailwindcss/pull/169#issuecomment-343549111

We'll get it working eventually but right now it's not supported.

EDIT: Although I'm still not entirely convinced this couldn't be done with the right Webpack config already.

[birchb]

Even though this issue is closed, some of you may find this useful: https://github.com/birchb/Vue-Tailwind-Vuex-Router-Template.

Thanks to all from whom I stole tricks! @adamwathan @cesaramirez

[Elfayer]

Vue-cli 3 and tailwind, saved my week: https://medium.com/@morrislaptop/using-tailwind-with-vue-cli-3-405171de6a58

[r0skar]

Sorry to bump a closed issue, but I wanted to share another way to include Tailwind and have @apply work everywhere.

Following the official vue-cli guide for working with css, we can install the vue-cli-plugin-style-resources-loader and configure it like this:

  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'postcss',
      patterns: [path.join(__dirname, 'src/assets/css/_tailwind-utilities.css')]
    }
  }

Now, @apply works everywhere. One thing to note: When using this method, the utilities classes are imported everywhere, so you should use PurgeCSS to get rid of the all the unused classes.