How to setup Tailwind for a new Angular project?

I have found the answer after banging my head everywhere today, change your webpack.config.js to,

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

There is small change, plugins now take array instead of function. Thanks in advance .

---

If anyone is still running into issue, checkout this blog I've written on Angular 10 + Tailwind CSS

https://fullyunderstood.com/get-started-with-angular-tailwind-css/

I managed to get Angular 10 + Angular Material to work with Tailwind CSS using configuration highlighted in this diff - Tailwind CSS support in Angular 10, with Angular Material.

Some key points besides what has already been highlighted in the question/answers:

• Need to explicitly install postcss (8.x). Somehow default pulls (7.x) causing Error: true is not a PostCSS plugin.
• Config in webpack.config.js depends on postcss-loader version 4.x.
• If you are using Angular Material, you will get Error: Failed to find '~@angular/material/theming'. To resolve this, I limit the scss files that will be processed by postcss by separating the scss file (i.e. test: /tailwind\.scss$/ in webpack.config.js).

So far, looks like it is working.

Imports are 'tailwindcss', not 'tailwind':

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';