Slide 1

Slide 1 text

AHASALL ng-conf 2021 Tailwind: The Future of CSS is Here!

Slide 2

Slide 2 text

AHASALL github.com/ahasall amadousall.com twitter.com/ahasall GDE in Angular Hi, I am Amadou Sall 2

Slide 3

Slide 3 text

AHASALL Like many of you, I have a love-hate relationship with CSS 3

Slide 4

Slide 4 text

AHASALL The current state of CSS

Slide 5

Slide 5 text

AHASALL Two options 5 vs

Slide 6

Slide 6 text

AHASALL The Bronze Plan You can write everything from scratch using Vanilla CSS™ 6

Slide 7

Slide 7 text

AHASALL My Button! 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

AHASALL .my-button:hover, .my-button:active { background-color: #3939e3; } .my-button:focus { outline: none; border-color: #3B67BC; } 9

Slide 10

Slide 10 text

AHASALL 10

Slide 11

Slide 11 text

AHASALL ✅ Lots of freedom ❌ Lots of work ❌ Lots of risks 11

Slide 12

Slide 12 text

AHASALL The Silver Plan You can use prebuilt components from a component-oriented CSS framework 12

Slide 13

Slide 13 text

AHASALL My Button! 13

Slide 14

Slide 14 text

AHASALL 14

Slide 15

Slide 15 text

AHASALL ✅ Very fast ✅ Very easy ✅ Very good ❌ Very monotonous ❌ Very rigid 15

Slide 16

Slide 16 text

AHASALL What if you could build custom designs without the downsides of vanilla CSS? 16

Slide 17

Slide 17 text

AHASALL What if you could build custom designs without losing your mind? 17

Slide 18

Slide 18 text

AHASALL I have a solution for you: Tailwind CSS, a utility-first CSS framework 18

Slide 19

Slide 19 text

AHASALL Disclaimer This may seem like a terrible idea at first, but please be open-minded 19

Slide 20

Slide 20 text

AHASALL Warning Once you start using Tailwind, you will not want to use anything else 20

Slide 21

Slide 21 text

AHASALL Demo time!

Slide 22

Slide 22 text

AHASALL What will Tailwind do for you?

Slide 23

Slide 23 text

AHASALL Ensure consistency at scale with a true design system out of the box 23

Slide 24

Slide 24 text

AHASALL Effortlessly create responsive layouts so you can focus on "real work" 24

Slide 25

Slide 25 text

AHASALL Create highly customizable layouts without compromising your design 25

Slide 26

Slide 26 text

AHASALL A highly extensible framework means that you are never painted into a corner 26

Slide 27

Slide 27 text

AHASALL A performant framework provides a globally accessible experience 27

Slide 28

Slide 28 text

AHASALL Ultimately, you are provided with a great developer experience 28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

AHASALL Real talk! What are the tradeoffs?

Slide 31

Slide 31 text

AHASALL You need to know CSS to be successful with Tailwind 31

Slide 32

Slide 32 text

AHASALL The huge number of HTML classes can make your pull requests harder to review 32

Slide 33

Slide 33 text

AHASALL Building a component library from scratch is no easy task 33

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

AHASALL Amadou Sall Frontend Software Engineer @ahasall www.amadousall.com ng-conf 2021 Thank You!