Troubleshooting tailwindss + postcss + angular

I stumbled upon some annoying errors setting up Tailwind and Angular. These snippets might fix things.

Possible solutions

In your webpack.config.js make sure you have the following, the order of the packages is important:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

Another solution, because of errors in my production builds was the following. Add a file postcss.config.json to your root folder. Point to your postcss.config.js file from there. In my case the tailwind.config.js is also in the root:

module.exports = {
  plugins: {
    tailwindcss: { config: 'tailwind.config.js' },
    autoprefixer: {},
  },
}