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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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.
   

   View Slide

7. AHASALL
   The current state of CSS
   

   View Slide

8. AHASALL
   Two options
   8
   vs
   

   View Slide

9. AHASALL
   9
   The Bronze Plan
   

   You can write everything from scratch using
   
   
   Vanilla CSS™
   

   View Slide

10. AHASALL
    My Button
    
    button>
    10
    

    View Slide

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
    

    View Slide

12. AHASALL
    .my-button:hover,
    

    .my-button:active {
    

    background-color: #3939e3;
    

    }
    
    
    .my-button:focus {
    

    outline: none;
    

    border-color: #3B67BC;
    

    }
    12
    

    View Slide

13. AHASALL
    13
    

    View Slide

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

    View Slide

15. AHASALL
    15
    The Silver Plan
    

    You can use prebuilt components from a
    component-oriented CSS framework
    

    View Slide

16. AHASALL
    My Button
    
    button>
    
    
    16
    

    View Slide

17. AHASALL
    17
    

    View Slide

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

    View Slide

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

    View Slide

20. AHASALL
    20
    a utility-first CSS framework
    

    View Slide

21. AHASALL
    Let’s see it in action
    

    View Slide

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

    View Slide

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

    View Slide

24. AHASALL
    Demo time!
    

    View Slide

25. AHASALL
    What will Tailwind do for you?
    

    View Slide

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

    View Slide

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

    View Slide

28. AHASALL
    28
    Create highly customizable layouts
    
    
    without compromising your design
    

    View Slide

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

    View Slide

30. AHASALL
    30
    A performant framework provides
    
    
    a globally accessible experience
    

    View Slide

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

    View Slide

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
    

    View Slide

33. AHASALL
    Real talk! What are the tradeoffs?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide