J'ai testé Tailwind CSS

En 2012, les CSS atomiques font leur première apparition avec, entre autres, l’émergence de ACSS (Atomizer CSS).

Sur le papier, l’idée est simple : styliser nous-mêmes nos éléments HTML à l’aide de classes utilitaires où classes atomiques.

Il s’agissait, à l’époque, d’un changement majeur dans la façon de composer nos pages. En effet, cette approche CSS s’opposait totalement à l’approche sémantique classique, par composants d’interface, introduite notamment par Bootstrap.

Je me souviens que je faisais partie des nombreux développeurs à être opposés à cette nouvelle méthodologie d’intégration, contraire, selon moi, aux bonnes pratiques CSS.

10 ans plus tard, me voilà proposer une conférence sur Tailwind CSS, le framework ayant démocratisé cette approche, que l’on nomme aujourd’hui l’approche CSS Utility-First… c’est un comble !

Dans cette conférence, j’aborderai les principes des frameworks CSS sémantiques et Utility-First en vous partageant mes retours d’expérience sur ces deux approches CSS. Puis, je ferai un tour d’horizon de Tailwind CSS et de la façon dont je l’utilise au quotidien en conciliant le meilleur des deux mondes.

Teaser : Je parlerai, peut-être, des propriétés personnalisées CSS !

Transcript

1. J’ai testé Tailwind CSS Jonathan Levaillant Développeur front-end ~ 💛 CSS ~ JoliCode Codeurs en Seine 2023
2. Chapitre Un Les frameworks CSS 🧰 2
3. Un framework CSS, c’est quoi ? Un framework CSS est une bibliothèque CSS fournissant un ensemble d’outils prêts à l’emploi facilitant la conception d’interfaces web. 3
4. Un framework CSS, c’est quoi ? Un framework CSS est une bibliothèque CSS fournissant un ensemble d’outils prêts à l’emploi facilitant la conception d’interfaces web. Parmi ces outils, nous trouvons habituellement : • une feuille de style CSS de réinitialisation (Reset CSS) et/ou d’harmonisation (Normalize CSS) ; • un système de grille ; • des composants d’interface (accordéons, fenêtres modales, etc.) ; • des classes utilitaires. 4
5. Les frameworks CSS sémantiques et atomiques ⚔ 5
6. Les frameworks CSS sémantiques 🏗 6
7. L’approche sémantique est une approche par composants d’interface. 🧱 7
8. .btn-outline .card .btn-primary .jumbotron .card-secondary .link-primary .link-secondary .logo .btn-secondary .thumbnail .navbar 8
9. .jumbotron .navbar .card .link-secondary .btn-secondary .card .link-secondary .btn-secondary .card .link-secondary .btn-secondary .btn-primary .logo .thumbnail .thumbnail .thumbnail 9
10. Les frameworks CSS sémantiques ✅ Avantages 1. Les frameworks CSS sémantiques sont accessibles au plus grand nombre. 2. Ils embarquent des composants d’interface prêts à l’emploi. 3. Ils permettent de concevoir des interfaces web robustes. ❌ Inconvénients 1. La personnalisation des composants d’interface est simple, mais reste limitée. 2. Le code CSS généré reste relativement volumineux. 10
11. Les frameworks CSS sémantiques ✅ Avantages 1. Les frameworks CSS sémantiques sont accessibles au plus grand nombre. 2. Ils embarquent des composants d’interface prêts à l’emploi. 3. Ils permettent de concevoir des interfaces web robustes. ❌ Inconvénients 1. La personnalisation des composants d’interface est simple, mais reste limitée. 2. Le code CSS généré reste relativement volumineux. 11
14. Bootstrap en quelques chiffres (et lettres) • Créateurs : Mark Otto et Jacob Thornton (Twitter). • Date de création 🎂 : 19 août 2011. • Version actuelle : 5.3.2. • Likes GitHub ⭐ : 166k. 14
15. Les frameworks CSS sémantiques se veulent accessibles et sont idéals pour les projets nécessitant des interfaces web basiques. 👌 15
16. Les frameworks CSS atomiques ⚛ 16
17. L’approche atomique (Utility-First) est une approche par classes utilitaires, chacune d’entre elles ayant une seule et unique fonction. 🔎 17
18. .flex .grid .text-center .text-right .mt-2 .mb-1 .mr-2 .mx-3 .pt-4 .pl-1 .justify-between .justify-center .items-end .items-stretch .flex-1 .shrink .w-1/2 .w-auto .w-full .h-0 .text-sm .text-2xl .font-sans .font-serif .font-bold .font-medium .text-white .text-blue .rounded-full .px-4 .py-2 .bg-gradient-to-l .bg-gradient-to-r .from-blue .from-violet .from-violet-800 .to-violet-600 .border-2 .border .shadow-md .shadow-2xl .opacity-0 .appearance-none .pointer-events-none .cursor-help .scale-75 .rotate-90 .transition .duration-75 .text-current .leading-3 .leading-loose .align-top .break-all .indent-2 .pb-8 .gap-x-0 .gap-3 .self-end .order-1 .rounded-md .text-gray-900 .bg-pink .p-4 18
19. .flex .grid .text-center .text-right .mt-2 .mb-1 .mr-2 .mx-3 .pt-4 .pl-1 .justify-between .justify-center .items-end .items-stretch .flex-1 .shrink .w-1/2 .w-auto .w-full .h-0 .text-sm .text-2xl .font-sans .font-serif .font-medium .text-white .text-blue .rounded-full .px-4 .py-2 .bg-gradient-to-l .bg-gradient-to-r .from-blue .from-violet .from-violet-800 .to-violet-600 .border-2 .border .shadow-md .shadow-2xl .opacity-0 .appearance-none .pointer-events-none .cursor-help .scale-75 .rotate-90 .transition .duration-75 .text-current .leading-3 .leading-loose .align-top .break-all .indent-2 .pb-8 .gap-x-0 .gap-3 .self-end .order-1 .p-4 .bg-pink .text-gray-900 .font-bold .rounded-md 19
20. .p-4 .bg-pink .text-gray-900 .font-bold .rounded-md 20
21. 😶😮😧😳 21
22. .p-4 .bg-pink .text-gray-900 .rounded-md .flex .grid .text-center .text-right .mt-2 .mb-1 .mr-2 .mx-3 .pt-4 .pl-1 .justify-between .justify-center .items-end .items-stretch .flex-1 .shrink .w-1/2 .w-auto .w-full .h-0 .text-sm .text-2xl .font-sans .font-serif .font-medium .text-blue .bg-gradient-to-l .from-blue .from-violet .border-2 .border .shadow-md .shadow-2xl .opacity-0 .appearance-none .pointer-events-none .cursor-help .scale-75 .rotate-90 .transition .duration-75 .text-current .leading-3 .leading-loose .align-top .break-all .indent-2 .pb-8 .gap-x-0 .gap-3 .self-end .order-1 .py-2 .px-4 .bg-gradient-to-r .to-violet-600 .rounded-full .text-white .font-bold .from-violet-800 22
23. .py-2 .px-4 .bg-gradient-to-r .from-violet-800 .to-violet-600 .text-white .font-bold .rounded-full 23
24. 😨😰🤢🤮 24
25. Les frameworks CSS atomiques ✅ Avantages 1. La création et la personnalisation des composants d’interface est libre. 2. Le code CSS généré reste léger et stable tout au long du projet. 3. Il est inutile de nommer ses classes CSS. ❌ Inconvénients 1. Chaque composant d’interface doit être construit de toute pièce. 2. Il convient de maîtriser les CSS. 3. Le HTML est alourdi et peu lisible. 4. Il est plus difficile de maintenir des interfaces web robustes. 25
26. Les frameworks CSS atomiques ✅ Avantages 1. La création et la personnalisation des composants d’interface est libre. 2. Le code CSS généré reste léger et stable tout au long du projet. 3. Il est inutile de nommer ses classes CSS. ❌ Inconvénients 1. Chaque composant d’interface doit être construit de toute pièce. 2. Il convient de maîtriser les CSS. 3. Le HTML est alourdi et peu lisible. 4. Il est plus difficile de maintenir des interfaces web robustes. 26
29. Tailwind CSS en quelques chiffres (et lettres) • Créateur : Adam Wathan. • Date de création 🎂 : 31 octobre 2017 (1.0.0 : 13 mai 2019). • Version actuelle : 3.3.5. • Likes GitHub ⭐ : 73k. 29
31. Les frameworks CSS atomiques s’adressent aux experts en développement front-end, désirant concevoir des interfaces web avancées. 🚀 31
32. Deux clans que tout oppose… ⚔🍿 32
33. Tailwind CSS est nul et rend votre code moche et illisible… c’est la pire chose qui soit arrivée aux CSS ! 😡 Laurent @laurent Allo. Tailwind CSS. Quelqu’un ? Non ? 😒 C’est pourtant devenu un incontournable… surtout pour se concentrer sur la conception des composants. Simon @simon Les CSS et le HTML sont mal conçus, ils auraient dû être remplacés depuis bien longtemps… 😬 Thibault @thibault Pourquoi utiliser Tailwind CSS quand on peut simplement utiliser des styles en ligne ? 🙄 Baptiste @baptiste Tailwind CSS est la solution idéale pour un développement web rapide et moderne. 🥳 Suzanne @suzanne 33
34. 🤝 L’approche « hybride » ou : comment j’ai appris à ne plus m’en faire et à aimer les deux. 34
35. Approche sémantique (≈70%) destinée à la création de mes composants d’interface. 🏗 35
36. Classes utilitaires (≈30%) réservées à un usage répétitif (marges, typo, couleurs, etc.). ⚛ 36
37. .c-btn 37
38. .c-btn .u-text-center 38
39. .c-btn .u-text-right 39
40. .c-btn /* 100% */ 🤔 40
41. .c-btn .c-btn--full .c-btn--full { width: 100%; } 😕 41
42. .c-btn--full { width: 100%; } .c-btn--1/2 { width: 50%; } .c-btn .c-btn--1/2 😟 42
43. .c-btn--full { width: 100%; } .c-btn--1/2 { width: 50%; } .c-btn .c-btn--3/4 😓 .c-btn--3/4 { width: 75%; } 43
44. .c-btn .u-w-full 😄 .u-w-full { width: 100%; } .u-w-1/2 { width: 50%; } .u-w-3/4 { width: 75%; } 44
45. 🤩 .u-w-full { width: 100%; } .u-w-1/2 { width: 50%; } .u-w-3/4 { width: 75%; } .c-btn .u-w-1/2 45
46. 🥳 .u-w-full { width: 100%; } .u-w-1/2 { width: 50%; } .u-w-3/4 { width: 75%; } .c-btn .u-w-3/4 46
47. Mes besoins 🎯 47
48. Mes besoins 1. Être libre dans la création et la personnalisation de mes composants d’interface. 48
49. Mes besoins 1. Être libre dans la création et la personnalisation de mes composants d’interface. 2. Disposer d’un générateur de classes utilitaires, performant, et entièrement personnalisable. 49
50. Mes besoins 1. Être libre dans la création et la personnalisation de mes composants d’interface. 2. Disposer d’un générateur de classes utilitaires, performant, et entièrement personnalisable. 3. Écrire du CSS natif (au revoir Sass 👋). 50
51. Liberté dans la création et la personnalisation des composants d’interface Générateur de classes utilitaires, performant et personnalisable CSS natif 51
52. Liberté dans la création et la personnalisation des composants d’interface ❌ ✅ Générateur de classes utilitaires, performant et personnalisable CSS natif 52
53. Liberté dans la création et la personnalisation des composants d’interface ❌ ✅ Générateur de classes utilitaires, performant et personnalisable ❌ ✅ CSS natif 53
54. Liberté dans la création et la personnalisation des composants d’interface ❌ ✅ Générateur de classes utilitaires, performant et personnalisable ❌ ✅ CSS natif ❌ ✅ 54
55. Voilà comment j’ai testé Tailwind CSS… 55
56. … en approche sémantique 🙃 56
58. Chapitre Deux 58
59. Une promesse efficace 🙄 59
60. Je parie que vous vous dites : « c’est une atrocité, quelle pagaille ! » et vous avez raison, c'est plutôt moche. À vrai dire, il est pratiquement impossible de penser que c’est une bonne idée la première fois que vous voyez ça [traduction]. Adam Wathan @adamwathan 60
61. Une nomenclature à toute épreuve 🙃 61
62. De nombreuses classes utilitaires partagent un espace de nommage commun mais correspondant à différentes propriétés CSS. Par exemple `text-lg` et `text-black` partagent tous deux l’espace de nommage `text-`, mais l’un concerne la taille de fonte utilisée pour le texte et l’autre la couleur [traduction]. Adam Wathan @adamwathan 62
63. Installation 💪󰞵 63
64. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init /terminal 64 64
65. module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; /postcss.config.js 65 65
66. Un fichier de configuration pour les gouverner tous 👑 66
67. module.exports = { content: ['.src/**/*.{twig,html,js}'], // ... }; /tailwind.config.js 67 67
68. module.exports = { content: ['.src/**/*.{twig,html,js}'], theme: { colors: { primary: '#645cbb', white: '#ffffff', }, spacing: { sm: '1.6rem', md: '2.4rem', }, fontSize: { md: '1.6rem', }, fontWeight: { bold: '700', }, borderRadius: { DEFAULT: '1.6rem', }, }, }; /tailwind.config.js 68 68
69. /* Output */ .mt-sm { margin-top: 1.6rem; } .mr-sm { margin-right: 1.6rem; } .mb-sm { margin-bottom: 1.6rem; } .ml-sm { margin-left: 1.6rem; } /* ... */ .font-bold { font-weight: 700; } 69 69
70. Notre premier composant d’interface… 🤩 70
71. … un bouton !… 😅 71
72. … en approche atomique .py-sm .px-md .bg-primary .text-white .text-md .font-bold .rounded ⚛ 72
73. … en approche sémantique .btn 🎉 73
74. La directive `@apply` ✂ 74
75. La directive `@apply` permet d’intégrer les classes utilitaires existantes dans des composants personnalisés. 😯 75
76. /* Input */ .btn { @apply py-sm px-md bg-primary text-white text-md font-bold rounded; } 76 76
77. /* Output */ .btn { padding-top: 1.6rem; padding-bottom: 1.6rem; padding-right: 2.4rem; padding-left: 2.4rem; background-color: #645cbb; color: #ffffff; font-size: 1.6rem; font-weight: 700; border-radius: 1.6rem; } 77 77
78. /* 😕 */ .btn { @apply py-sm px-md bg-primary text-white text-md font-bold rounded; } 78 78
79. La fonction `theme()` 🎨 79
80. La fonction `theme()` permet d’accéder aux valeurs renseignées dans le fichier de configuration de Tailwind CSS. 👍 80
81. /* Input */ .btn { padding: theme(spacing.sm) theme(spacing.md); background-color: theme(colors.primary); color: theme(colors.white); font-size: theme(fontSize.md); font-weight: theme(fontWeight.bold); border-radius: theme(borderRadius.DEFAULT); } 81 81
82. /* Output */ .btn { padding: 1.6rem 2.4rem; background-color: #645cbb; color: #ffffff; font-size: 1.6rem; font-weight: 700; border-radius: 1.6rem; } 82 82
83. /* 🤔 */ .btn { padding: theme(spacing.sm) theme(spacing.md); background-color: theme(colors.primary); color: theme(colors.white); font-size: theme(fontSize.md); font-weight: theme(fontWeight.bold); border-radius: theme(borderRadius.DEFAULT); } 83 83
84. Bonjour les variables CSS 👋 84
85. Déclaration d’une variable CSS : --color-primary: #645cbb; 85
86. Utilisation d’une variable CSS : color: var(--color-primary); 86
87. /* Fonction `theme()` */ .btn { padding: theme(spacing.sm) theme(spacing.md); background-color: theme(colors.primary); color: theme(colors.white); font-size: theme(fontSize.md); font-weight: theme(fontWeight.bold); border-radius: theme(borderRadius.DEFAULT); } 87 87
88. /* Variables CSS 🤩 */ .btn { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-primary); color: var(--color-white); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); border-radius: var(--border-radius); } 88 88
89. La pseudo-classe `:root` permet de cibler la racine de l’arbre représentant le document. 🌳 89
90. :root { --color-primary: #645cbb; --color-white: #ffffff; --spacing-sm: 1.6rem; --spacing-md: 2.4rem; --font-size-md: 1.6rem; --font-weight-bold: 700; --border-radius: 1.6rem; } 90 90
91. .btn { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-primary); color: var(--color-white); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); border-radius: var(--border-radius); } 91 91
92. Le grand détournement 🤠 92
93. module.exports = { content: ['.src/**/*.{twig,html,js}'], theme: { colors: { primary: '#645cbb', white: '#ffffff', }, spacing: { sm: '1.6rem', md: '2.4rem', }, fontSize: { md: '1.6rem', }, fontWeight: { bold: '700', }, borderRadius: { DEFAULT: '1.6rem', }, }, }; /tailwind.config.js 93 93
94. module.exports = { content: ['.src/**/*.{twig,html,js}'], theme: { colors: { primary: 'var(--color-primary)', white: 'var(--color-white)', }, spacing: { sm: 'var(--spacing-sm)', md: 'var(--spacing-md)', }, fontSize: { md: 'var(--font-size-md)', }, fontWeight: { bold: 'var(--font-weight-bold)', }, borderRadius: { DEFAULT: 'var(--border-radius)', }, }, }; /tailwind.config.js 94 94
95. /* Output */ .mt-sm { margin-top: var(--spacing-sm); } .mr-sm { margin-right: var(--spacing-sm); } .mb-sm { margin-bottom: var(--spacing-sm); } .ml-sm { margin-left: var(--spacing-sm); } /* ... */ .font-bold { font-weight: var(--font-weight-bold); } 95 95
96. Cette solution n’est pas idéale… mais elle a le mérite de fonctionner. 😄 96
97. Bilan après deux années passées avec Tailwind CSS ✅ Avantages 1. Fichier de configuration en JavaScript, hautement personnalisable. 2. Générateur de classes utilitaires, performant et modulable (classes réactives et conditionnelles). 3. Liberté de créer ses composants d’interface en approche sémantique, et ce, via du CSS natif (merci aux variables CSS ✨). 4. Le code CSS généré reste stable et léger (approche « hybride », PurgeCSS). 5. Écosystème riche (documentation détaillée, bibliothèque de composants, etc.). 97
98. Bilan après deux années passées avec Tailwind CSS ❌ Inconvénients 1. Nomenclature perfectible (un comble pour un framework CSS atomique). 2. Impossibilité d’exposer automatiquement les variables JavaScript (issues du fichier de configuration), comme variables CSS, dans `:root`. 98
99. Protips 👍 • Frameworks CSS sémantiques : Basés sur une approche sémantique, par composants d’interface, ils se veulent accessibles et sont idéals pour concevoir des interfaces web basiques (Bootstrap, Semantic UI, Bulma, etc.). • Frameworks CSS atomiques : Basés sur une approche atomique (Utility-First), par classes utilitaires, ils requièrent une expertise en CSS et sont idéals pour concevoir des interfaces web avancées (Tailwind CSS, UnoCSS, Tachyons, etc.). • Approche « hybride » : Approche sémantique (≈70%) avec une utilisation conjointe de classes utilitaires (≈30%) réservées à un usage répétitif. • Tailwind CSS : Framework CSS avant tout conçu pour une approche atomique, mais exploitable en approche « hybride » grâce, notamment, aux variables CSS. 99
100. Merci ! 💛 Des questions ? 🙋 speakerdeck.com/jlevaillant 100