Slide 1

Slide 1 text

AHASALL Devoxx France 2022 Tailwind ou le futur du CSS

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

AHASALL 4 I haven't written a single line of CSS for a while

Slide 5

Slide 5 text

AHASALL 5 But all my applications are beautiful, responsive, maintainable, and fast

Slide 6

Slide 6 text

PROFESSEUR AMADOU SALL EXCELLENT FÉTICHEUR VAUDOU AU DON DE CSS RARE Il a acquis une réputation mondiale grâce à de brillants succès FAX 00 221 01 234 56 78 Par corespondance ou sur place. Après résultats, donnez ce que vous voulé ! Ce sorcier mondialement connu dans son quartier, déboguera n’importe quelle code CSS défaillante sans qu’il vous soit neceçaire de vous déplacer. Son pouvoir est tel qu’il sera capable de scaner et d’effasser les codes d’erreurs de vos applications à distance par téléphatie, grace à des incantations vaudous connues de lui seul depuis dix générations.

Slide 7

Slide 7 text

AHASALL The current state of CSS

Slide 8

Slide 8 text

AHASALL Two options 8 vs

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

AHASALL My Button 10

Slide 11

Slide 11 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; 
 } 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

AHASALL 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

AHASALL My Button 16

Slide 17

Slide 17 text

AHASALL 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

AHASALL 20 a utility-first CSS framework

Slide 21

Slide 21 text

AHASALL Let’s see it in action

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

AHASALL Demo time!

Slide 25

Slide 25 text

AHASALL What will Tailwind do for you?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

AHASALL 28 Create highly customizable layouts without compromising your design

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

AHASALL 30 A performant framework provides a globally accessible experience

Slide 31

Slide 31 text

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

Slide 32

Slide 32 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 32

Slide 33

Slide 33 text

AHASALL Real talk! What are the tradeoffs?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 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 38

Slide 38 text

AHASALL Amadou Sall Frontend Software Engineer @ahasall www.amadousall.com Devoxx France 2022 Thank You!