Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

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

    View full-size slide

  3. AHASALL
    3
    Like many of you, I have


    a love-hate relationship with CSS

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  7. AHASALL
    The current state of CSS

    View full-size slide

  8. AHASALL
    Two options
    8
    vs

    View full-size slide

  9. AHASALL
    9
    The Bronze Plan

    You can write everything from scratch using


    Vanilla CSS™

    View full-size slide

  10. AHASALL
    My Button

    button>
    10

    View full-size 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 full-size slide

  12. AHASALL
    .my-button:hover,

    .my-button:active {

    background-color: #3939e3;

    }


    .my-button:focus {

    outline: none;

    border-color: #3B67BC;

    }
    12

    View full-size slide

  13. AHASALL
    ✅ Lots of freedom


    ❌ Lots of work


    ❌ Lots of risks
    14

    View full-size slide

  14. AHASALL
    15
    The Silver Plan

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

    View full-size slide

  15. AHASALL
    My Button

    button>


    16

    View full-size slide

  16. AHASALL
    ✅ Very fast


    ✅ Very easy


    ✅ Very good


    ❌ Very monotonous


    ❌ Very rigid
    18

    View full-size slide

  17. AHASALL
    19
    What if you could build custom designs


    without the downsides of vanilla CSS?

    View full-size slide

  18. AHASALL
    20
    a utility-first CSS framework

    View full-size slide

  19. AHASALL
    Let’s see it in action

    View full-size slide

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

    View full-size slide

  21. AHASALL
    Warning
    Once you start using Tailwind,


    you will not want to use anything else
    23

    View full-size slide

  22. AHASALL
    Demo time!

    View full-size slide

  23. AHASALL
    What will Tailwind do for you?

    View full-size slide

  24. AHASALL
    26
    Ensure consistency at scale with a


    true design system out of the box

    View full-size slide

  25. AHASALL
    27
    Effortlessly create responsive layouts


    so you can focus on "real work"

    View full-size slide

  26. AHASALL
    28
    Create highly customizable layouts


    without compromising your design

    View full-size slide

  27. AHASALL
    29
    A highly extensible framework means that


    you are never painted into a corner

    View full-size slide

  28. AHASALL
    30
    A performant framework provides


    a globally accessible experience

    View full-size slide

  29. AHASALL
    31
    Ultimately, you are provided with a


    great developer experience

    View full-size slide

  30. 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 full-size slide

  31. AHASALL
    Real talk! What are the tradeoffs?

    View full-size slide

  32. AHASALL
    34
    You need to know CSS to be


    successful with Tailwind

    View full-size slide

  33. AHASALL
    35
    The huge number of HTML classes can


    make your pull requests harder to review

    View full-size slide

  34. AHASALL
    36
    Building a component library


    from scratch is no easy task

    View full-size slide

  35. 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 full-size slide

  36. AHASALL
    Amadou Sall


    Frontend Software Engineer


    @ahasall


    www.amadousall.com
    Devoxx France 2022
    Thank You!

    View full-size slide