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

Made with Slides.com