WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind

Efficient JavaScript
development with Tailwind

JavaScript developer @ Antistatique
Yago
yago.io
yanngouffon
Yann Gouffon

• Tailwind : définitions, concepts, usage
• Intégration(s) dans une app JavaScript
• Retour sur expérience
🍔 Au menu

utility CSSutility CSS
||
Functional CSS

CSS Utility Classes and “Separation of Concerns”
— Adam Wathan, 2017

👶 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;
}
}
}

🧒 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;
}

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 ?
• … 🤕

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).

🧑 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 { /*...*/ }

🧑🎤 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>

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>
≠
🙈

👍 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

👎 Les inconvénients
• Code HTML “pollué”
• Expérience de debug; inspection DevTools
• Nom des classes sémantiques

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

👯 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

👯 Twin ?
<h1 tw="text-center">Hello</h1>
<h1 style={{ textAlign: 'center' }}>Hello</h1>
<h1 class="css-18ifwim">Hello</h1>

📖 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",
},

📖 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;

📖 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`} />
🙈

👍 Avantages Twin vs Classes CSS
• Ultra flexible
• Bien intégré avec l’approche CSS-in-JS
• Pas de CSS inutilisé out-of-the-box !

🏋 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

👎 Désavantages Twin vs Classes CSS
• Ultra flexible → doit être cadré

J’ai mis du temps à adopter le functional CSS,
mais l’usage m’a rapidement fait changer d’avis.

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>
👉

Chez Antistatique, nous utilisons Tailwind de
plus en plus et Twin pour nos projets React
depuis ~1 an. #happySoFar

♥ 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

💔 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

WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind

Recommandé

Recommandé

Contenu connexe

Similaire à WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind

Similaire à WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind (20)

WebMardi [2020.10.08] - Efficient JavaScript development with Tailwind