Angular with Tailwind CSS

[utterances-bot]

Angular with Tailwind CSS

Learn how to style Angular applications with Tailwind CSS

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

[alexbjorlig]

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

[marcjulian]

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

[alexbjorlig]

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

[phileagleson]

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.

[garygrossgarten]

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

[btpatelmobio]

Hey Mark

[btpatelmobio]

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)"

[marcjulian]

@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'),
            ],
          },
        },
      },
    ],
  },
};

[btpatelmobio]

Hi Mark

[btpatelmobio]

Thanks for the big support.

[ghost]

Thanks for the blog, It was working absolutly fine for me but one day it started giving me error when checked your blog again came to know that need to change the extra webpack.config.js but still I am getting the below error

[error] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.rules[14] has an unknown property 'postcssOptions'. These properties are valid:
  object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
  -> A rule

below is my package.json file
{
"name": "pariksha",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.4",
"@angular/common": "~10.0.4",
"@angular/compiler": "~10.0.4",
"@angular/core": "~10.0.4",
"@angular/forms": "~10.0.4",
"@angular/platform-browser": "~10.0.4",
"@angular/platform-browser-dynamic": "~10.0.4",
"@angular/router": "~10.0.4",
"@garygrossgarten/ngx-tailwind": "^0.2.0",
"keycloak-angular": "^8.0.1",
"keycloak-js": "^11.0.2",
"ng-katex": "^2.0.3",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.3",
"@angular/cli": "~10.0.3",
"@angular/compiler-cli": "~10.0.4",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ngx-build-plus": "latest",
"postcss-import": "latest",
"postcss-loader": "latest",
"postcss-scss": "latest",
"protractor": "~7.0.0",
"tailwindcss": "latest",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}

below is the webpack.config
module.exports = {
module : {
rules : [
{
test: /.scss$/,
loader: 'postcss-loader',
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
],
},
}

Is it because in my package.json I see latest as the version and not anything specific? Please help

[marcjulian]

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

[ghost]

Thank you very much. Really appreciate your help. I will tey to create new in case I have issue I will share repo with you. Regards Rakesh Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Marc <notifications@github.com> Sent: Wednesday, October 28, 2020 2:09:53 PM To: notiz-dev/notiz <notiz@noreply.github.com> Cc: Rakesh Kumar <rkumar24@live.com>; Mention <mention@noreply.github.com> Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111) @rakesh-banneret<https://github.com/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<https://github.com/notiz-dev/ngx-tailwind>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#111 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQLC6LRNL4USZQ24EWN4B5TSM7KFTANCNFSM4PV36XJA>.

[ryanjanborja]

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

[marcjulian]

@iryanjan18 can you provide a reproduction repository?

[ryanjanborja]

@iryanjan18 can you provide a reproduction repository?

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

[marcjulian]

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

[ghost]

Hi , Thanks for your help. It is a private repo but I can try the things you told in couple of days and let you know. Regards Rakesh Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Ryan Jan Borja <notifications@github.com> Sent: Monday, November 23, 2020 1:21:24 PM To: notiz-dev/notiz <notiz@noreply.github.com> Cc: Rakesh Kumar <rkumar24@live.com>; Mention <mention@noreply.github.com> Subject: Re: [notiz-dev/notiz] Angular 10 with Tailwind CSS (#111) @iryanjan18<https://github.com/iryanjan18> can you provide a reproduction repository? Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#111 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQLC6LVU3YQMRLFRNX5ZW7LSRIH7ZANCNFSM4PV36XJA>.

[felixbeer]

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?

[marcjulian]

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