Tailwind ou le futur du CSS - Devoxx France 2022

Est-il possible de développer des interfaces graphiques belles, responsives et faciles à maintenir sans écrire une seule ligne de CSS ? Avec Tailwind, c'est possible.

Contrairement à la majorité des frameworks CSS qui fournissent des composants préconstruits, Tailwind fournit des classes utilitaires CSS de bas niveau que vous pouvez combiner pour créer des designs personnalisés.

L'objectif de cette présentation est de vous aider à comprendre la valeur ajoutée de l’approche "utility-first". Nous verrons :

- Pourquoi l'approche utility-first est le futur du CSS.
- Comment Tailwind rend la création d'interfaces aussi simple qu’un jeu d’enfant.
- Les principaux avantages et les défis de l'approche utility-first.

Transcript

1. AHASALL Devoxx France 2022 Tailwind ou le futur du CSS
2. AHASALL github.com/ahasall amadousall.com twitter.com/ahasall monsieurangular.com GDE in Angular Hi, I am Amadou Sall 2
3. AHASALL 3 Like many of you, I have a love-hate relationship with CSS
4. AHASALL 4 I haven't written a single line of CSS for a while
5. AHASALL 5 But all my applications are beautiful, responsive, maintainable, and fast
6. 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.
7. AHASALL The current state of CSS
8. AHASALL Two options 8 vs
9. AHASALL 9 The Bronze Plan 
 You can write everything from scratch using Vanilla CSS™
10. AHASALL <button class="my-button">My Button </ button> 10
11. 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
12. AHASALL .my-button:hover, 
 .my-button:active { 
 background-color: #3939e3; 
 } .my-button:focus { 
 outline: none; 
 border-color: #3B67BC; 
 } 12
13. AHASALL 13
14. AHASALL ✅ Lots of freedom ❌ Lots of work ❌ Lots of risks 14
15. AHASALL 15 The Silver Plan 
 You can use prebuilt components from a component-oriented CSS framework
16. AHASALL <button class="btn btn-primary">My Button </ button> 16
17. AHASALL 17
18. AHASALL ✅ Very fast ✅ Very easy ✅ Very good ❌ Very monotonous ❌ Very rigid 18
19. AHASALL 19 What if you could build custom designs without the downsides of vanilla CSS?
20. AHASALL 20 a utility-first CSS framework
21. AHASALL Let’s see it in action
22. AHASALL Disclaimer This may seem like a terrible idea at first, but please be open-minded 22
23. AHASALL Warning Once you start using Tailwind, you will not want to use anything else 23
24. AHASALL Demo time!
25. AHASALL What will Tailwind do for you?
26. AHASALL 26 Ensure consistency at scale with a true design system out of the box
27. AHASALL 27 Effortlessly create responsive layouts so you can focus on "real work"
28. AHASALL 28 Create highly customizable layouts without compromising your design
29. AHASALL 29 A highly extensible framework means that you are never painted into a corner
30. AHASALL 30 A performant framework provides a globally accessible experience
31. AHASALL 31 Ultimately, you are provided with a great developer experience
32. 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
33. AHASALL Real talk! What are the tradeoffs?
34. AHASALL 34 You need to know CSS to be successful with Tailwind
35. AHASALL 35 The huge number of HTML classes can make your pull requests harder to review
36. AHASALL 36 Building a component library from scratch is no easy task
37. 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
38. AHASALL Amadou Sall Frontend Software Engineer @ahasall www.amadousall.com Devoxx France 2022 Thank You!