[Help wanted] add Tailwindcss to webpack

[Sjoerd]

Hello,
I'm trying to add VueJS to webpack (from my Vue application), but it doesn't work.

My code:

var path        = require('path')
var webpack     = require('webpack')

module.exports = {
  entry: './frontend/app.js',
  output: {
    path: path.resolve(__dirname, './public/js'),
    publicPath: '/js/',
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
}

[autumnwoodberry]

If you are using the default webpack build from vue-cli you don't need to touch the webpack config. You just need to add tailwind to the postcss plugins (you would do this in .postcssrc.js file). Here is an example config:

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

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

[adamwathan]

Closing this as not an actual issue with Tailwind but feel free to continue the discussion, hopefully someone can help you get your setup working the way you want it to 👍