How to integrate Tailwind CSS/PostCSS into Webpack?

#1

I’m trying to integrate Tailwind CSS into the workflow, such that changes will be compiled when running $ vapid start or $ vapid build, but I cannot figure out how to customize Vapid’s Webpack. So far, I’ve added the following files to the project root: postcss.config.js, tailwind.config.js, and webpack.config.js, but the Tailwind compiler is not being run under $ vapid start or $ vapid buid.

I looked over the ‘Way to Extend Webpack Configuration’ post but found it unhelpful. Perhaps I don’t understand where or how to configure Vapid’s Webpack instance.

If it’s helpful here’s the contents of my config files in the root folder of the project:

package.json

{
  "name": "test",
  "vapid": {},
  "scripts": {
    "start": "vapid start .",
    "build": "vapid build ."
  },
  "dependencies": {
    "@tailwindcss/typography": "^0.3.1",
    "@vapid/cli": "^0.11.4",
    "autoprefixer": "^10.0.4",
    "postcss": "^8.1.13",
    "tailwindcss": "^2.0.1"
  }
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}