Tailwind: The Future of CSS is Here!

Can you write a beautiful, maintainable, and responsive web applications without a single line of CSS? With Tailwind, you can. Unlike the majority of CSS frameworks that give you prebuilt components, Tailwind provides you with low-level CSS utility classes that you can combine to create custom designs. The goal of this presentation is to help you understand the value proposition of the utility-first philosophy. We will have a look at:
- why utility-first CSS is the future
- how Tailwind makes building bespoke user interfaces a total breeze
- the benefits and challenges of the utility-first approach

Transcript

1. AHASALL ng-conf 2021 Tailwind: The Future of CSS is Here!
2. AHASALL github.com/ahasall amadousall.com twitter.com/ahasall GDE in Angular Hi, I am Amadou Sall 2
3. AHASALL Like many of you, I have a love-hate relationship with CSS 3
4. AHASALL The current state of CSS
5. AHASALL Two options 5 vs
6. AHASALL The Bronze Plan You can write everything from scratch using Vanilla CSS™ 6
7. AHASALL <button class="my-button">My Button!</button> 7
8. AHASALL .my-button { padding: .5rem 1rem; border-width: 1px; border-color: transparent; border-radius: .375rem; color: #fff; font-size: .875rem; line-height: 1.25rem; font-weight: 500; background-color: #1413e9; cursor: pointer; } 8
9. AHASALL .my-button:hover, .my-button:active { background-color: #3939e3; } .my-button:focus { outline: none; border-color: #3B67BC; } 9
10. AHASALL 10
11. AHASALL ✅ Lots of freedom ❌ Lots of work ❌ Lots of risks 11
12. AHASALL The Silver Plan You can use prebuilt components from a component-oriented CSS framework 12
13. AHASALL <button class="btn btn-primary">My Button!</button> 13
14. AHASALL 14
15. AHASALL ✅ Very fast ✅ Very easy ✅ Very good ❌ Very monotonous ❌ Very rigid 15
16. AHASALL What if you could build custom designs without the downsides of vanilla CSS? 16
17. AHASALL What if you could build custom designs without losing your mind? 17
18. AHASALL I have a solution for you: Tailwind CSS, a utility-first CSS framework 18
19. AHASALL Disclaimer This may seem like a terrible idea at first, but please be open-minded 19
20. AHASALL Warning Once you start using Tailwind, you will not want to use anything else 20
21. AHASALL Demo time!
22. AHASALL What will Tailwind do for you?
23. AHASALL Ensure consistency at scale with a true design system out of the box 23
24. AHASALL Effortlessly create responsive layouts so you can focus on "real work" 24
25. AHASALL Create highly customizable layouts without compromising your design 25
26. AHASALL A highly extensible framework means that you are never painted into a corner 26
27. AHASALL A performant framework provides a globally accessible experience 27
28. AHASALL Ultimately, you are provided with a great developer experience 28
29. AHASALL The Tailwind Developer Experience™ You can stay in your HTML You can avoid naming things You can rapidly prototype You can refactor with confidence 29
30. AHASALL Real talk! What are the tradeoffs?
31. AHASALL You need to know CSS to be successful with Tailwind 31
32. AHASALL The huge number of HTML classes can make your pull requests harder to review 32
33. AHASALL Building a component library from scratch is no easy task 33
34. AHASALL ✅ A true design system ✅ Responsive to the core ✅ Highly customizable ✅ Extensible ✅ More performant ✅ Great developer experience ❌ Requires you to know CSS ❌ It’s verbose ❌ No components Summary
35. AHASALL Amadou Sall Frontend Software Engineer @ahasall www.amadousall.com ng-conf 2021 Thank You!