Getting started with Angular + Tailwind
Getting started guide to Tailwind integration with Angular.

Why tailwind?
Tailwind is an utility-first css framework with a set of utility css classes. Using these class we can easily build a UI components and modifies their designs to create our own design pattern.
"A utility-first CSS framework packed with classes likeflex
,pt-4
,text-center
androtate-90
that can be composed to build any design, directly in your markup."
Who is using Tailwind
- Medium
- Algolia
- Starbucks
- Github CoPilot
- NASA's Jet Propulsion Laboratory
- Heroku
- Twitch
- Stripe
Getting started with Tailwind
You can install tailwind in your existing project very in straight forward way.
npm i -D tailwindcss
Create tailwind configuration file `tailwind.config.js` in your angular project root.
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Import tailwind css modules in `styles.scss`
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Let's test tailwind classes in angular project
<button type="button" class="btn-primary">Default</button>
.btn-primary {
@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
}
Conclusion
We have seen how to integrate Tailwind CSS in Angular with simple examples.
Installation: Tailwind CLI - Tailwind CSS
Documentation for the Tailwind CSS framework.

Tailblocks — Ready-to-use Tailwind CSS blocks
Ready-to-use Tailwind CSS blocks