WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind

Tailwind et le CSS fonctionnel ont énormément gagné en popularité ces dernières années. Quelles opportunités cela nous offre en tant que designers et développeurs ? Comment intégrer ça à notre workflow ?

On va rapidement introduire Tailwind; ses concepts, son utilisation. Puis voir comment l’intégrer de façon optimale dans une application JavaScript. Et enfin, faire un retour sur expérience de l’approche présenté après une petite année d’exploration.

Ce talk s’adresse à tous ceux aussi bien aux personnes qui ne connaisse pas Tailwind, que ceux qui l’utilise depuis longtemps. Et pas besoin d’être un développeur chevronné pour suivre 

YouTube : https://www.youtube.com/watch?v=xTq6rC26gWU&t=1732s&ab_channel=Webmardi

Transcript

1. Efficient JavaScript development with Tailwind
2. JavaScript developer @ Antistatique Yago yago.io yanngouffon Yann Gouffon
3. • Tailwind : définitions, concepts, usage • Intégration(s) dans une app JavaScript • Retour sur expérience 🍔 Au menu
4. Tailwind ?
5. utility CSS utility CSS || Functional CSS
6. CSS Utility Classes and “Separation of Concerns” — Adam Wathan, 2017
7. 👶 Au commencement <div> <img src="/avatar.jpg" alt="Adam Wathan's portrait"> <div> <h2>Adam Wathan</h2> <p> Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut. </p> </div> </div> <div class="author-bio"> .author-bio { background-color: white; border: 1px solid hsl(0,0%,85%); border-radius: 4px; overflow: hidden; > img { display: block; width: 100%; height: auto; } > div { padding: 1rem; > h2 { font-size: 1.25rem; } > p { font-size: 1rem; line-height: 1.5; } } }
8. 🧒 Approche sémantique <div class="media-card"> <img class="media-card__image" src="/avatar.jpg" alt="Adam Wathan's portrait" /> <div class="media-card__content"> <h2 class="media-card__title">Adam Wathan</h2> <p class="media-card__body"> Adam is a rad dude who likes TDD, Active Record, and garlic bread with cheese. He also hosts a decent podcast and has never had a really great haircut. </p> </div> </div> .media-card { background-color: white; border: 1px solid hsl(0,0%,85%); border-radius: 4px; overflow: hidden; } .media-card__image { display: block; width: 100%; height: auto; } .media-card__content { padding: 1rem; } .media-card__title { font-size: 1.25rem; } .media-card__body { font-size: 1rem; line-height: 1.5; }
9. Et si j’ai un nouveau composant qui utilise les mêmes styles que .media-card ? • On duplique le CSS ? • @extend ? • On refactor en classes plus générales ? • On réutilise .media-card hors contexte ? • … 🤕
10. Quand on parle de separation of concerns avec HTML et CSS, il s’agit de définir le sens de la relation. • Le CSS dépend de l’HTML : HTML indépendant fournit les classes dont dépend le CSS (ex .author-bio). • L’HTML dépend du CSS : CSS indépendant fournit des classes que l’HTML utilise pour construire l’interface (ex .btn).
11. 🧑 Approche “Bootstrap” <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your email..." aria-label="Email address" aria-describedby="button" /> <div class="input-group-append"> <button type="button" id="button" class="btn btn-outline-secondary" > Subscribe </button> </div> </div> .mb-3 { /*...*/ } .form-control { /*...*/ } .input-group { /*...*/ } .input-group-append { /*...*/ } .btn { /*...*/ } .btn-outline-secondary { /*...*/ }
12. 🧑🎤 Functional CSS <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="/picture.jpg" alt="Woman paying for a purchase"> </div> <div class="mt-4 md:mt-0 md:ml-6"> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold"> Marketing </div> <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline"> Finding customers for your new business </a> <p class="mt-2 text-gray-600"> Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers. </p> </div> </div>
13. En résumé, c’est juste des styles inlines 😏 — Captain sceptique, 2020 • Les styles inlines définissent les valeurs à l’usage. • Les utility classes assurent la consistance des valeurs. <article> <h1 class="text-h1">My article</h1> <h2 class="text-lg">Intro</h2> <p>Lorem ipsum dolor sit amet...</p> <h2 class="text-lg">First thing first</h2> <p>Eiuro, inquit adridens iniquum...</p> </article> <article> <h1 style="font-size: 30px">My article</h1> <h2 style="font-size: 22px">Intro</h2> <p>Lorem ipsum dolor sit amet...</p> <h2 style="font-size: 23px">First thing first</h2> <p>Eiuro, inquit adridens iniquum...</p> </article> ≠ 🙈
14. 👍 Les avantages • Consistance des styles • Grande flexibilité • DX, rapidité de développement (+ design in browser) • Handover et maintenance facilités • Target agnostic (JavaScript ou non, frameworks,…) • Scalability
15. 👎 Les inconvénients • Code HTML “pollué” • Expérience de debug; inspection DevTools • Nom des classes sémantiques
16. Tailwind // tailwind.config.js module.exports = { purge: [], theme: { extend: {/*..*/}, }, variants: {}, plugins: [], } /* styles.css */ @tailwind base; @tailwind components; @tailwind utilities; h1 { @apply text-lg; } $ npx tailwindcss build styles.css -o output.css • Meilleure DX du marché ! • Responsive first • Simple et flexible
19. Tailwind-in-JS
21. 👯 Twin ? • Macro Babel • Transforme les utility classes en CSS-in-JSS • Fonctionne avec la plupart des libraries (styled- components, Emotion,…) • Suggestions lors de fautes de frappe
22. 👯 Twin ? <h1 tw="text-center">Hello</h1> <h1 style={{ textAlign: 'center' }}>Hello</h1> <h1 class="css-18ifwim">Hello</h1>
23. 📖 Setup (avec Emotion) $ yarn add tailwindcss @emotion/core @emotion/styled $ yarn add -- dev twin.macro babel-plugin-macros $ touch base.css tailwind.config.js babel-plugin-macros.config.js // babel-plugin-macros.config.js module.exports = { twin: { config: './tailwind.config.js', styled: '@emotion/styled', format: 'auto', hasSuggestions: true, debug: false, }, }; // package.json "scripts": { "tailwind:build": "tailwind build base.css -o styles.css -c tailwind.config.js", },
24. 📖 Utilisation (avec Emotion + React) /** @jsx jsx */ import React from 'react'; import { jsx } from '@emotion/core'; import tw from 'twin.macro'; const MyComponent = () = ( <div tw="h-screen flex items-center justify-center"> {/* ... */} </div> ); export default MyComponent;
25. 📖 Usage flexible (avec Emotion) <div tw="bg-gray-100"> <div style={active & tw`bg-gray-100`}> <div css={active & tw`bg-gray-100`}> const styles = css` button { ${tw`bg-blue-500 text-white`} } `; <div css={styles}> <button tw="bg-blue-500 text-white" css={[ styles, // with tw`` in it active & tw`bg-green-500`, disabled ? tw`cursor-not-allowed` : tw`cursor-pointer`, ]} style={tw`border border-blue-900`} /> 🙈
26. Retour sur expérience
27. 👍 Avantages Twin vs Classes CSS • Ultra flexible • Bien intégré avec l’approche CSS-in-JS • Pas de CSS inutilisé out-of-the-box !
28. 🏋 Parlons poids (default config) • Non compressé : 2.38Mb 🤯 • Minifié : 1.94Mb • Gzip : 187Kb • Brotli : 45.2Kb → Beaucoup de CSS inutilisés → 2 options : • Réduire le scope (couleurs, breakpoints, variantes) • PurgeCSS
30. 👎 Désavantages Twin vs Classes CSS • Ultra flexible → doit être cadré
31. J’ai mis du temps à adopter le functional CSS, mais l’usage m’a rapidement fait changer d’avis.
32. import { css } from '@emotion/core'; import tw from 'twin.macro'; export default css` ${tw`flex flex-wrap`} > button { ${tw` border border-solid border-red-300 text-red-500 text-sm font-medium `} padding: 2px 7px; } `; <div tw="flex flex-wrap"> {tags.length > 0 & tags.map((tag, i) = ( <button key={`tag-${i}`} type="button" tw=" border border-solid border-red-300 text-red-500 text-sm font-medium " onClick={() = onReset()} > {tag} </button> ))} </div> 👉
33. Chez Antistatique, nous utilisons Tailwind de plus en plus et Twin pour nos projets React depuis ~1 an. #happySoFar
34. ♥ J’aime le functional CSS et Tailwind parce que • Mettre en place de nouveaux composants est plus rapide • Revenir sur un vieux projet pour modifier les “styles” est moins pénible • Plus besoin de savoir le nom des classes et variables Bootstrap
35. 💔 J’aime moins le functional CSS et Tailwind parce que • Je n’écris plus de CSS… • Il faut quand même savoir le nom des classes Tailwind (tailwind intellisense ne marche pas avec Twin), mais la doc est cool
36. Merci ! 🙏
37. Questions ?