Angular with Tailwind CSS #172
Replies: 20 comments
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
@alexbjorlig Hi Alex, do you have an example repo for me to have a look at to reproduce your error? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick reply, I will get started with the creation of a repo so the error can be reproduced. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@phileagleson Awesome, thank you! We will update the guide. |
Beta Was this translation helpful? Give feedback.
-
|
Hey Mark |
Beta Was this translation helpful? Give feedback.
-
|
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)
ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
|
Beta Was this translation helpful? Give feedback.
-
|
@btpatelmobio which version of 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'),
],
},
},
},
],
},
}; |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the big support. |
Beta Was this translation helpful? Give feedback.
-
|
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.
below is my package.json file below is the webpack.config Is it because in my package.json I see latest as the version and not anything specific? Please help |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
|
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 <[email protected]>
Sent: Wednesday, October 28, 2020 2:09:53 PM
To: notiz-dev/notiz <[email protected]>
Cc: Rakesh Kumar <[email protected]>; Mention <[email protected]>
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>.
|
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
@iryanjan18 can you provide a reproduction repository? |
Beta Was this translation helpful? Give feedback.
-
Here's my newly created repo: https://github.com/iryanjan18/angular-tailwind |
Beta Was this translation helpful? Give feedback.
-
|
@iryanjan18 I see you are using Additionally, when I run |
Beta Was this translation helpful? Give feedback.
-
|
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 <[email protected]>
Sent: Monday, November 23, 2020 1:21:24 PM
To: notiz-dev/notiz <[email protected]>
Cc: Rakesh Kumar <[email protected]>; Mention <[email protected]>
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>.
|
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@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 🤞 |
Beta Was this translation helpful? Give feedback.
-
Angular with Tailwind CSS
Learn how to style Angular applications with Tailwind CSS
https://notiz.dev/blog/angular-with-tailwindcss
Beta Was this translation helpful? Give feedback.
All reactions