Angular 10 with Tailwind CSS

Learn how to style Angular applications with Tailwind CSS

https://notiz.dev/blog/angular-10-with-tailwindcss

Hi Marc. Thanks for a great post. I'm trying to follow this guide in a project using the Angular CLI. We are using the Angular CLI feature of having multiple projects. When I everything described above, I get the error that postcss-import can't resolve my styles.scss file - it's looking in the wrong directory. I have created a SO quesiton. If you have any ideas what's going on, I would be very thankfull 🙏 https://stackoverflow.com/q/63265225/3694288

@alexbjorlig

@alexbjorlig Hi Alex, do you have an example repo for me to have a look at to reproduce your error?
We are using this also for notiz.dev. Have a look in our angular.json. We configured the "builder": "ngx-build-plus:browser", for two applications notiz and shortcodes.

Thanks for the quick reply, I will get started with the creation of a repo so the error can be reproduced.

I followed this walkthrough and was getting an error stating that plugins was not a valid option for postcss. I think postcss-loader may have been updated since this was written so I wanted to share what worked for me. I had to update my webpack.config.js to look like this:

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

Just wanted to share in case it helps anyone else.

@phileagleson

@phileagleson Awesome, thank you! We will update the guide.

Hey Mark

i have some issue in install tailwind in angular 10.

This is the error in tailwind please help me for solving.

"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 (D:\ang\app-name\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (D:\ang\app-name\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.

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

@btpatelmobio

@btpatelmobio which version of postcss-loader are you using? If you are on version 4.0 please try @phileagleson update for the webpack.config.js as the options have been update

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

content: update webpack.config.js for postcss-loader@4.x

Hi Mark

Thanks for the big support.

@rakesh-banneret do you have reproduction repo? Much easier to help you out, otherwise I suggest you create a new Angular project and start over with all steps. One note postcss-import in version 13.0.0 breaks currently the build, thus use version 12.0.1. Check out ngx-tailwind.

Hmmm. I'm using angular 11.0.2, tailwindcss 2.0.1. I didn't encounter issues running the app but the page doesn't apply the styles. https://imgur.com/gZrP4Lw

@iryanjan18 can you provide a reproduction repository?

@iryanjan18 can you provide a reproduction repository?

Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind

@iryanjan18 I see you are using @angular-builders/custom-webpack, in this blog post and also the schematics ngx-tailwind are using ngx-build-plus instead. Can you try it out with ngx-build-plus instead of @angular-builders/custom-webpack, you can use it easily in a new project via the schematics.

Additionally, when I run ng serve in your project the following log indicates that PostCSS cannot pickup any plugin including Tailwind.

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Hey!

Thanks a lot for your tutorial. Is there anyway we could still get "intellisense" working in Jetbrains Editors for example. And out of interest, which editor are you using?

@BeerGrizzly awesome thanks 👍 !! I am using VS Code together with tailwind-intellisense. I read recently that Webstorm 2020.3 has added Tailwind intellisense support. If you are using any other JetBrains IDE you can install the Tailwind CSS Plugin.

Hopefully you can find something useful for your setup 🤞

Navigation Menu

Repository navigation

Angular 10 with Tailwind CSS #111

Angular 10 with Tailwind CSS

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular 10 with Tailwind CSS #111

Description

Angular 10 with Tailwind CSS

Activity

alexbjorlig commented on Aug 5, 2020

marcjulian commented on Aug 6, 2020

alexbjorlig commented on Aug 6, 2020

phileagleson commented on Sep 9, 2020

garygrossgarten commented on Sep 9, 2020

btpatelmobio commented on Sep 29, 2020

btpatelmobio commented on Sep 29, 2020

marcjulian commented on Sep 29, 2020

btpatelmobio commented on Sep 30, 2020

btpatelmobio commented on Sep 30, 2020

marcjulian commented on Oct 28, 2020

ryanjanborja commented on Nov 23, 2020

marcjulian commented on Nov 23, 2020

ryanjanborja commented on Nov 23, 2020

marcjulian commented on Nov 23, 2020

felixbeer commented on Nov 23, 2020

marcjulian commented on Nov 24, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions