Patricio Vargas
Software Engineer
Angular & TailwindCSS
devpato
devpato
Sr.Developer dvocate
What is 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.
devpato
Advantages Of TailwindCSS
- More time for your business logic
- It has classes made for you, now combine them
- Add the predefined classes to your HTML like any other CSS class
- Very light...in production
- Mobile first
- Extendible and customizable
- Use it the "old school" way
- VSCode Extension
devpato
Install TailwindCSS In
you Angular app
- Schematic ngneat/tailwind - Angular <= 11.2.0
- Native support in Angular >= 11.2.0
devpato
ngneat/tailwind
devpato
ng add @ngneat/tailwind
ngneat/tailwind
devpato
<body class="dark">
<app-root></app-root>
</body>@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';Index.html
styles.scss
Tailwind in Angular >= 11.2.0
devpato
Recursos
devpato
https://tinyurl.com/8az0bst3
Tutorial
Github Repo
https://tinyurl.com/1938633f
Angular + TailwindCSS (English)
By Patricio Vargas
