$30 off During Our Annual Pro Sale. View Details »

Tailwind ou le futur du CSS - Devoxx France 2022

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.

Amadou Sall

April 22, 2022
Tweet

More Decks by Amadou Sall

Other Decks in Programming

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!