The purpose of this article is to enhance the combination of Angular and Tailwindcss.
Prerequisites
- Angular
Tailwindcss
A utility-first CSS framework packed with classes like flex
, pt-4
, text-center
and rotate-90
that can be composed to build any design, directly in your markup. according to the official definition visit tailwindcss official website to know more.
Installation
Inside your existing angular project or new one run the following commands in the project terminal:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Inside tailwind.config.js
Add the paths of your templates files
module.exports = {
// ...
content: [
"./src/**/*.{html,ts}",
],
// ...
}
Add tailwind to style.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
Use tailwind inside app.component.html
<div class="text-2xl">Angular and Tailwindss</div>
Run server
ng serve
Top comments (0)