AHASALL Devoxx France 2022 Tailwind ou le futur du CSS 

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

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

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

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

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. 

AHASALL The current state of CSS 

AHASALL Two options 8 vs 

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

AHASALL My Button 10 

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 

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

AHASALL 13 

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

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

AHASALL My Button 16 

AHASALL 17 

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

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

AHASALL 20 a utility-first CSS framework 

AHASALL Let’s see it in action 

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

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

AHASALL Demo time! 

AHASALL What will Tailwind do for you? 

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

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

AHASALL 28 Create highly customizable layouts without compromising your design 

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

AHASALL 30 A performant framework provides a globally accessible experience 

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

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 

AHASALL Real talk! What are the tradeoffs? 

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

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

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

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 

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