How to setup Tailwind for a new Angular project?

Question

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/components';
@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?

Answer 1

Imports are 'tailwindcss', not 'tailwind':

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

Answer 2

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/

Answer 3

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. 🤞

Answer 4

If your Angular version is greater than or equal to 11.2.0, you can skip this section

The easiest way to use TailwindCSS in your Angular app with version less than 11.2.0 in my personal opinion is by using the @ngneat/tailwind npm package. I had a great experience with it (plug and play).

1. First step is to run the following schematic in your Angular project: ng add @ngneat/tailwind

2. When asked if you want to enable dark mode select class

3. When asked if you would you like to use Tailwind directives & functions in component styles? select Yes

4. When asked what TailwindCSS plugins you want to enable, select forms and typography or all of them. That's up to you.

There's 4 parts we need to focus on after we have installed TailwindCSS in our Angular app.

-A new file created tailwind.config.js it should look like this

-A new file created webpack.config.js it should look like this

-The new dark class added to your index.html body element

<body class="dark">
  <app-root></app-root>
</body>

-Some imports added to your styles.scss file

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

Note: To turn on purge in your production build follow this tiny tweet

OPTIONAL

Take a look to this amazing video created by my friend Beeman. It shows you how use TailwindCSS in Angular in 3 MINUTES!

If you want to learn how to do it in Angular 11.2.0

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l