title: How to setup Tailwind for a new Angular project?
body: <p>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:</p>
  <ul>
  <li>Create a new app using <code>ng new my-app</code></li>
  <li>Use Angular routing =&gt; yes</li>
  <li>Use SCSS as the stylesheet</li>
  <li>In the root directory of the project run <code>npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D</code></li>
  <li>In the src folder there is a <strong>styles.scss</strong> file, modify it to</li>
  </ul>
  <p>.</p>
  <pre><code>@import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
  </code></pre>
  <ul>
  <li>In the root directory of the project run <code>npx tailwind init</code></li>
  <li>In the root directory of the project create a new file <strong>webpack.config.js</strong> with the following content</li>
  </ul>
  <p>.</p>
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: &quot;postcss-loader&quot;,
          options: {
            ident: &quot;postcss&quot;,
            syntax: &quot;postcss-scss&quot;,
            plugins: () =&gt; [
              require(&quot;postcss-import&quot;),
              require(&quot;tailwindcss&quot;),
              require(&quot;autoprefixer&quot;),
            ],
          },
        },
      ],
    },
  };
  </code></pre>
  <ul>
  <li>In the root directory there is a <strong>Angular.json</strong> file
  <ul>
  <li>Search for the key projects =&gt; my-app =&gt; architect =&gt; build
  <ul>
  <li>Change the builder to <code>&quot;builder&quot;: &quot;@angular-builders/custom-webpack:browser&quot;,</code></li>
  <li>Add to the options</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>.</p>
  <pre><code>&quot;customWebpackConfig&quot;: {
      &quot;path&quot;: &quot;./webpack.config.js&quot;
  },
  </code></pre>
  <ul>
  <li>Search for the key projects =&gt; my-app =&gt; architect =&gt; serve
  <ul>
  <li>Change the builder to <code>&quot;builder&quot;: &quot;@angular-builders/custom-webpack:dev-server&quot;,</code></li>
  <li>Add to the options</li>
  </ul>
  </li>
  </ul>
  <p>.</p>
  <pre><code>&quot;customWebpackConfig&quot;: {
      &quot;path&quot;: &quot;./webpack.config.js&quot;
  },
  </code></pre>
  <ul>
  <li>Run the app with <code>ng serve</code> from the app's root directory</li>
  </ul>
  <p>I'm getting this error</p>
  <blockquote>
  <p>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.</p>
  <ul>
  <li>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)</li>
  </ul>
  <p>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.</p>
  <ul>
  <li>same text as above</li>
  </ul>
  </blockquote>
  <p>How can I setup Tailwind correctly?</p>