Add Angular #35
Add Angular #35
Conversation
| Finally, add this to `src/styles.css`: | ||
|
|
||
| ```scss | ||
| @import "tailwindcss/base"; |
There was a problem hiding this comment.
Can't this be using @tailwind ?
| @import "tailwindcss/base"; | |
| @tailwind"tailwindcss/base"; |
There was a problem hiding this comment.
Any particular reason/benefit for this change? I've understood from documentation that @import is the right way. But not really sure how angular handles it.
If you're using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the @tailwind directive to avoid issues when importing any of your own additional files
(PS: I think you mean @tailwind base;)
There was a problem hiding this comment.
Yes, I mean @tailwind base; I think the difference is in the fact I'm not using postcss-import in my project. I followed the installation guide including the Webpack guide.
I have pushed my project for reference. Don't know what the best way to go is as I'm relatively new to TailwindCSS and PostCSS. Maybe @adamwathan can give some advice here
|
Nice! Just did this myself with Angular 8 before I saw your PR. Came down to the same thing actually 👍 |
|
Ping @adamwathan @tunecino |
Co-Authored-By: Harrie Essing <harrie.essing@gmail.com>
|
Works also great with Angular 9 👍 |
|
could we merge this PR? |
examples/angular-cli/README.md
Outdated
| npx tailwind init | ||
| ``` | ||
|
|
||
| Finally, add this to `src/styles.css`: |
There was a problem hiding this comment.
Finally, add this to src/styles.css:
Should this not be .scss?
There was a problem hiding this comment.
Depending on your stylesheet format you select for your Angular app - ng new APPNAME supports
- CSS
- SCSS
- Sass
- Less
- Stylus
There was a problem hiding this comment.
Maybe the explanation should include these as a clarification. Also, has anyone tested this method works the save on all of those (CSS, SCSS, Sass, Less, Stylus) by just adding the imports to the right styles.[extension] file, without changing any of the other steps?
If changes are required for some of the style versions we should mention it, or with any extra steps.
Or if some style is not supported we should also mention it.
There was a problem hiding this comment.
@marcjulian I was thinking more inline withe the context of the document, which references .scss everywhere else
There was a problem hiding this comment.
Sorry for delay. @marcjulian is right you can use any of those but this working example is about scss as it starts with ng new angular-cli --style=scss. So yes @blowsie it is a typo that I fixed in a later commit back in september (8c7902a).
|
Should this also update the |
|
Keep in mind that Angular is already at v10 but the config setup still applies :) |
examples/angular-cli/README.md
Outdated
|
|
||
| ### TailwindCSS as a separate Design System Project | ||
|
|
||
| This is more of a recommandation for advanced projects. |
There was a problem hiding this comment.
Typo, please replace with "recommendation".
examples/angular-cli/README.md
Outdated
| } | ||
| ``` | ||
|
|
||
| Make those changes for both **architect.build** and **architect.serve**. |
There was a problem hiding this comment.
Perhaps move this notice up? Seems kind of important.
|
This works for Angular 10, using version Edit: v10.0.0 was just released. |
|
Quick notice: There is a package that helps setting up Tailwind + Angular very quickly called ng-tailwind. Would be good to put a note about it at the start :) |
|
No description provided.