As researching how to use Tailwind CSS in my angular project, I have come across lots of outdated articles on the internet. It actually becomes fairly easy with the latest version and tools.
Schematic tool
The tool I used is @neat/tailwind, you can add the latest tailwind CSS version 2 in your Angular project in a second.
Steps
- run the following cmd to add this tool:
ng add @ngneat/tailwind.It will prompt some options like dark mode, tailwind plug-in…etc. choose the default value would be enough to start. - Done. that’s it, literally, as simple as it.
Extral step for ng-zorro
I am using ng-zorro in the Angular project, and there are some style conflicts between these two after added the tailwind CSS library. The problem is from the tailwind Preflight, which is a set of base styles from Tailwind. As ng-zorro has already integrated the normalize, we can simply disable the preflight in the tailwind config file:
corePlugins: {preflight: false,}
This can apply to other UI frameworks like Angular Material if there are style conflicts.
- add ng-zorro first and then tailwind CSS when you create a new project.
