On a intégré Tailwind dans un thème Magento
Tailwind CSS est le framework qui enthousiasme les développeurs actuellement. Notre agence a à cœur de proposer le meilleur des technologies disponibles.
Faire bénéficier nos clients de ses avantages fait tout naturellement partie de nos priorités.
Dans cet article, nous vous expliquons pourquoi nous conseillons l'utilisation de Tailwind CSS.
En bonus, nous vous donnons les clés pour passer à la pratique !
Tailwind, un concentré d'avantages
Tailwind, le fameux Framework CSS a le vent en poupe.
Cela n'est pas pour rien si nous le recommandons à nos clients.
Il présente de très nombreux avantages :
- dites adieu au grand ménage. Les fichiers CSS / Less comportent très rapidement du code mort. Il faut les nettoyer régulièrement et cela comporte des risques que souvent les développeurs ne souhaitent pas prendre. Avec Tailwind, le CSS est généré par compilation avec les seules classes utilisées.
- moins de régressions graphiques. Lors de la modification de certains éléments graphiques avec du CSS classique, il n'est pas rare que cela créé des modifications sur d'autres éléments. Avec Tailwind, les modifications sont limitées à l’élément concerné.
- une configuration simple. La configuration se fait dans un fichier json unique.
- une monté en compétence rapide. Tailwind est un framework bas niveau. Il est très proche du CSS natif. Les intégrateurs sont opérationnels presque immédiatement !
Il est impossible d'évoquer Tailwind sans parler de l’excellent thème Hyvä.
Ce thème intègre nativement Tailwind et permet d’accélérer votre site web en retirant les technologies vieillissantes de Magento : Require.js, Knockout.js.
Un front plus rapide, c'est plus de confort pour vos clients et donc un meilleur taux de transformation !
Pour notre client nous avons fait le choix de ne pas intégrer Hyvä et de garder le thème basé sur Luma.
Ce choix n'est pas anodin puisque pour le client cela signifie :
- avoir un front moins rapide
- des risques de conflits entre les classes CSS
- un coût financier supérieur pour passer l'ensemble du site sous Tailwind
Mais alors pourquoi avoir fait ce choix ?
La migration d'un thème complet représente un gros chantier. Il est difficile de le livrer par brique de fonctionnalités.
Au final, pour le client cela induit :
- des livraisons régulières
- un coût inférieur pour les pages et éléments concernés (même tunnel, administration du compte, footer, …)
- de nouveaux éléments développés sans se soucier des règles CSS existantes (ou presque cf partie Quelques épines sur notre chemin)
- plus de flexibilité pour les futures intégrations
La simplification de la gestion du projet
L'autre avantage se trouve dans la gestion du projet.
En effet, la réalisation de maquettes HTML est ainsi possible dans un projet spécifique.
Point important et non des moindres, un intégrateur peut réaliser les éléments graphiques sans posséder la connaissance de l'intégration dans Magento.
Cela se traduit par une montée en compétences plus rapide, ainsi qu'une plus grande souplesse dans notre façon de travailler.
Concrètement, avec le client, nous organisons plusieurs ateliers afin de :
- recueillir le besoin
- valider le fonctionnement au moyen de Wireframes
- présenter des maquettes Image ou sur Figma et les adapter
- présenter et valider les maquettes HTML après les avoir adaptées aux cas concrets rencontrés lors de scénarios réalistes (texte long, visibilité/contraste, …)
Après ces ateliers, le développeur Magento peut intégrer les maquettes même sans être un as de l'intégration !
Passons à la pratique
Créer un nouveau thème spécifique
Le thème actuel présente une dette importante. Il est difficile de nettoyer le code mort sans risquer de casser quelque chose.
L'idée est donc de laisser le thème d'origine afin de supprimer ce dernier une fois que l'ensemble des éléments du site seront migrés.
Nous préférons donc créer un nouveau thème qui hérite du thème actuel.
Nous appelons le thème tws/tailwind-theme qui hérite du thème tws/theme. Dans le dossier app/code/Tws/TailwindTheme, nous créons les fichiers suivants :
\{
"name": "tws/tailwind-heme",
"description": "TWS Tailwind Theme",
"config": \{
"sort-packages": true
},
"require": \{
"magento/framework": "*",
"tws/theme"
},
"type": "magento2-theme",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": \{
"files": [
"registration.php"
]
}
}<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Tws/tailwind-theme',
__DIR__
);<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>TWS - Tailwind theme</title>
<parent>Tws/theme</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Nous procédons au rajout du dossier media et du fichier media/preview.jpg qui est la miniature du thème.
Ajout de la configuration de tailwind
Nous créons l'arborescence suivante :
└── *web*
├── *css*
└── *tailwind*
├── main.css
├── postcss.config.js
├── reset.css
└── tailwind.config.js
Nous ajoutons le contenu de chacun des fichiers.
module.exports = \{
plugins: \{
tailwindcss: \{},
autoprefixer: \{},
}
}/** @type \{import('tailwindcss').Config} */
module.exports = \{
prefix: 'tw-',
important: true,
content: [
'../../../../**/*.\{phtml,html,js}'
],
plugins: []
}
Dans la configuration, nous définissons un préfixe afin que les classes tailwind ne soient pas identiques à certaine classes d’origine.
Également, nous spécifions d'utiliser systématiquement l'attribut important afin que les classe tailwind prennent le pas sur les règles existantes.
Enfin, nous définissons le paterne des fichiers à analyser lors de la compilation du CSS.
@import "reset.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
Quant au fichier reset.css, il comporte les règles permettant de mettre à zéro certaines règles CSS du thème d'origine.
Afin que le fichier CSS compilé soit bien pris en compte par Magento, nous le rajoutons dans un layout :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/main.min.css"/>
</head>
</page>
Enfin, pour éviter la publication sur git du fichier compilé, nous rajoutons un .gitignore avec la ligne suivante :
web/css/main.min.cssCompilation
Dans nos scripts de déploiement Jenkins, nous avons ajouté la compilation du css nécessaire au bon rendu du site. Cette compilation doit être réalisée avant le déploiement des statiques.
Pour générer le css, nous avons choisi d'utiliser le script autonome.
La compilation s’effectue de la façon suivante :
cd app/code/Tws/TailwindTheme/web/tailwind && tailwindcss -m -i main.css -o ../css/main.min.cssVous prendrez bien un peu de Vanilla JS en dessert ?
Vous avez certainement entendu parlé de Vanilla JS
C'est tout simplement du JS pur.
De 1995 à 2020 environ, l'utilisation sans un Framework semblait être très complexe.
Au début du langage, chaque navigateur avait sa propre syntaxe ou fonction JS.
Les efforts de standardisation vont permettre de réduire cette problématique de jeunesse.
La version ECMAScript 2015 permet enfin une syntaxe plus simple.
Mais il faudra attendre quelques années de plus pour l'intégration dans les navigateurs. C'est la réduction de l'usage massif d'IE dans les environs de l'année 2015 (source)
à sa disparition (2022) qui permet aujourd'hui d'utiliser le langage JS natif sans surcouche lourde.
Qu'on le dise aux développeurs frileux, le JS aujourd'hui cela ressemble à ça :
class Rectangle \{
constructor(hauteur, largeur) \{
this.hauteur = hauteur;
this.largeur = largeur;
}
get area() \{
return this.calcArea();
}
calcArea() \{
return this.largeur * this.hauteur;
}
}
const carré = new Rectangle(10, 10);
console.log(carré.area);
Alors pourquoi continuer à utiliser requirejs ou jQuery ?
Nous avons fait le choix dans le cadre de ce projet de minimiser l'usage de bibliothèque JS utilisée par Magento afin de préparer une possible migration vers Hyvä ou l'abandon du thème d'origine base sur Luma (le thème natif de Magento).
Pour cela, nous incluons les quelques scripts JS vitaux via le layout :
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/main.css"/>
<script async="async" src="js/header.js"/>
<script async="async" src="js/autosuggest.js"/>
</head>
</page>Vous noterez ici l'usage du async car le JS n'est pas vital pour l'affichage du site. Ne ralentissons pas le rendu du site inutilement !
Quelques épines sur notre chemin
Nous pourrions conclure sur l'affirmation que la mise en place de Tailwind est un long fleuve tranquille. Mais il y a tout de même quelques ombres au tableau.
Premièrement, durant la migration progressive, la taille totale de fichier à charger sera plus grande.
Ensuite, nous avons rencontré quelques surprises. Premièrement il existe des incompatibilités entre les classes CSS d'origine.
Les !important ou les styles inline peuvent poser problème.
Le reset.css ou l'édition des templates et fichier javascript existant permet de corriger cela.
Puis, nous avons dû adapter les rem. En effet, le thème du client définit une taille de font spécifique. Pour être précis, un font-size est attribué au html. Cela casse l'intégralité des mesures rem utilisées par Tailwind.
Si cela est une mauvaise pratique, dans les faits, supprimer cette règle reviendrait à réécrire tous les css.
Représentant trop de travail, nous avons donc adapté la configuration Tailwind pour redéfinir l’ensemble des tailles :
/** @type \{import('tailwindcss').Config} */
module.exports = \{
prefix: 'tw-',
important: true,
content: [
'../../../../**/*.\{phtml,html,js}'
],
theme: \{
fontSize: \{
xs: '1.2rem',
sm: '1.28rem',
base: '1.6rem',
lg: '1.8rem',
xl: '2rem',
'2xl': '2.4rem',
'3xl': '3rem'
},
spacing: \{
'0': '0px',
'1': '0.4rem',
'1.5': '0.6rem',
'2': '0.8rem',
'2.5': '1rem',
'3': '1.2rem',
'3.5': '1.4rem',
'4': '1.6rem',
'5': '2rem',
'6': '2.4rem',
'7': '2.8rem',
'8': '3.2rem',
'9': '3.6rem',
'10': '4rem',
'11': '4.4rem',
'12': '4.8rem',
'14': '5.6rem',
'16': '6.4rem',
'20': '8rem',
'24': '9.6rem',
} },
plugins: []
}Ainsi, le changement de font à la racine n'impacte plus les classes Tailwind !
Un client heureux
La mise en place de Tailwind dans le thème a apporté quelques complexités rapidement résolue. Cela augmente sensiblement le poids du thème durant la phase de transition.
En revanche, cela permet des livraisons progressives des changements graphiques. Le client est heureux de voir son site évoluer et les clients ne sont pas perturbés par un changement intégral de l'interface du site.
Aussi la gestion de projet est simplifiée. Les échanges avec le client sont plus efficaces. L'organisation des ressources internes est facilitée par la séparation des tâches dont les technologies ne sont pas interdépendantes.
Notons enfin au titre des bénéfices, des livraisons plus rapides et moins de retour en recette.
En conclusion, c'est un client satisfait et une équipe heureuse d'avoir menée une mission avec succès !
Comme nous venons de vous le démontrer, Tailwind CSS offre de nombreux avantages pour vos projets : une gestion globale du projet plus fluide et plus simple et une facilité indéniable dans la phase d'intégration.
Par la validation issue de notre expérience pratique, nous vous recommandons de fortement considérer l'utilisation de Tailwind CSS dans vos projets.
Nos experts se feront un plaisir d'échanger avec vous sur ce sujet si enthousiasmant !