tailwindcss-angular-workshop

A sick repo with killer Tailwind demos 😘

Concepts Covered

0 Tailwind Intro

• What is Tailwind CSS?
• Utility First vs Others
• When Tailwind isn’t the solution.
• Getting Started with Tailwind in your Angular Apps

1 Basics

• text basics: underline, italic, text color, weight, and size, white space no wrap, overflow wrap
• display and background colors
• Spacing Elements, margin & padding
• Reusable Styles with @apply

2 Layouts in Tailwind & Responsive Design

• Flexbox
• Grid
• Layouts with Tailwind
• Media Queries

3 An Animated Tailwind

• States (:hover) & Pseudo Selectors (:visited)
• Transforms, Transitions, & Animations

4 Custom Styles

• Arbitrary Values
• Customizing with the Tailwind Config file
  • Adjusting the scale of font sizes, providing color themes and more!

5 Additional/Advanced Tailwind Concepts

• Functions & Directives
• Tailwind Plugins (Forms)
• Component Libraries & Tailwind
  • Integrating Kendo UI with Tailwind
  • How Tailwind Layers with Your Custom Branding and Style Systems
• Production Ready

Wrap Up

• Resources & Prize Winners 🎉