I want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far:

• Create a new app using ng new my-app
• Use Angular routing => yes
• Use SCSS as the stylesheet
• In the root directory of the project run npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
• In the src folder there is a styles.scss file, modify it to

.

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

• In the root directory of the project run npx tailwind init
• In the root directory of the project create a new file webpack.config.js with the following content

.

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

• In the root directory there is a Angular.json file
  • Search for the key projects => my-app => architect => build
    • Change the builder to "builder": "@angular-builders/custom-webpack:browser",
    • Add to the options

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Search for the key projects => my-app => architect => serve
  • Change the builder to "builder": "@angular-builders/custom-webpack:dev-server",
  • Add to the options

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Run the app with ng serve from the app's root directory

I'm getting this error

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11) at Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• same text as above

How can I setup Tailwind correctly?

I want to create a new Angular project using Tailwind CSS. My current CLI version is 10.1.1. Things I have done so far:

• Create a new app using ng new my-app
• Use Angular routing => yes
• Use SCSS as the stylesheet
• In the root directory of the project run npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
• In the src folder there is a styles.scss file, modify it to

.

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

• In the root directory of the project run npx tailwind init
• In the root directory of the project create a new file webpack.config.js with the following content

.

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

• In the root directory there is a Angular.json file
  • Search for the key projects => my-app => architect => build
    • Change the builder to "builder": "@angular-builders/custom-webpack:browser",
    • Add to the options

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Search for the key projects => my-app => architect => serve
  • Change the builder to "builder": "@angular-builders/custom-webpack:dev-server",
  • Add to the options

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Run the app with ng serve from the app's root directory

I'm getting this error

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/styles.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11) at Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• same text as above

How can I setup Tailwind correctly?

• javascript
• angular
• webpack
• angular-cli
• tailwind-css

• Maybe this is easier: trungk18./experience/configure-tailwind-css-with-angular – MikeOne Commented Sep 12, 2020 at 13:00
• thanks but I would like to avoid installing a tool to use another tool – Question3r Commented Sep 13, 2020 at 16:08
• I can reproduce that on my machine – user13755987 Commented Sep 14, 2020 at 6:06

4 Answers 4

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