CODEWITHSUNDEEP
javascriptangularwebpackangular-clitailwind-css
Question3r
Question3r

Reputation: 3832

How to setup Tailwind for a new Angular project?

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:

.

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

.

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

.

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

.

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

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?

Upvotes: 5

Views: 7595

Answers (4)

Patricio Vargas
Patricio Vargas

Reputation: 5522

Installing TailwindCSS (Angular version

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.

angular tailwind

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

Upvotes: -2

kctang
kctang

Reputation: 11202

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

Upvotes: 6

Indrajeet
Indrajeet

Reputation: 501

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/

Upvotes: 6

txk
txk

Reputation: 166

Imports are 'tailwindcss', not 'tailwind':

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

Upvotes: 3

Related Questions