Add Tailwind CSS To Your Angular Project
Posted By : Vinit Kumar Bhagat | 29-Dec-2021
Angular css
What is Tailwind CSS?
Tailwind CSS is a utility-css utility based low-level css framework for building a custom user interface. The difference between Tailwind and other frameworks is that the other ones like Bootstrap are based on components because of that you have to stay with their component styles only but Tailwind gives you the utility classes so you can build your own component as you want.
Advantages of Tailwind CSS
1.You can build complex ui structures very smoothly
2.You have total control over your style
3.Since it comes with a bunch of utility classes you can build your own component by using them to make UI look good
4.It is much faster than other css frameworks
5.As it has a bunch of pre-built utility classes you can make highly responsive layout by using them
Now lets see how we can add Tailwind CSS to our Angular Project
Installing Tailwind CSS
run the below command in your Angular project directory and press enter.
ng add @ngneat/tailwind
You will be asked to choose dark mode
choose class if you want to enable dark mode
next you will be asked to use tailwind directive and function in component styles
type Y and press enter
next it will ask to enable plugin
choose forms and typography. you can add more from there if you want and then press enter.
it will install tailwind css to your angular project.
you will see the output that it creates two file
tailwind.config.js
webpack.config.js
it will also update the following file
src/styles.css
src/index.html
As it will add the webpack.config.js file you need to restart your dev server
run the following command
ng serve
once it will run check src/styles.css
you will see three imports
@import 'tailwindcss/base';
@import 'tailwindcss/component';
@import 'tailwindcss/utilities';
you will see that plugins are added into tailwind.config.js what you have chosen for.
In the index.html file you will see the dark class is added to the body tag if you have chosen for dark mode earlier.
you will see the following line updated in index.html for dark mode.
<body class="dark">
......
......
</body>
Now you are good to go with TailwindCSS.
We, at Oodles, provide end-to-end ERP software development services to solve complex business problems. Our seasoned developers specialize in building custom enterprise solutions from the ground up for diverse business needs. We use the latest tech stack and open-source software technologies to develop next-gen software applications at cost-effective rates.
