Lorsque l’on développe des applications web avec AstroJS, on peut définir le style CSS de plusieurs manières, et notamment avec Tailwind CSS.
Tailwind est un framework CSS “utility-first”, qui constitue un excellent choix pour définir le style d’une application web.
Bootstrap avait déjà popularisé le concept de classes utilitaires il y a quelques années.
Voici par exemple un div
dont le positionnement est fixé en haut de la page. On utilise uniquement du HTML et une classe pour définir ce style, sans avoir à écrire de CSS :
<div class="fixed-top">...</div>
Il y a tout de même du code CSS associé à la classe “fixed-top”, mais il est défini une fois pour toute dans le fichier .css fourni par Bootstrap.
Tailwind va encore plus loin, notamment en modernisant la façon dont les classes sont optimisées pour réduire la taille du bundle CSS.
Tailwind va par exemple supprimer automatiquement les classes qui ne sont pas utilisées dans votre application.
Voici le code d’une image de profil, dont le style est défini par des classes Tailwind :
<img
class="rounded-full object-center object-cover w-32 h-32"
src="path/to/your/image.jpg"
alt="Profile Picture"
/>
Et le résultat :
Détaillons ces classes utilitaires :
rounded-full
: crée une forme circulaire en définissant border-radius
à 50%object-center
: centre le contenu de l’image dans son conteneurobject-cover
: l’image couvre tout le conteneur en conservant ses proportions (aspect-ratio)w-32
: définit la largeur selon une échelle prédéfinieh-32
: définit la hauteurOn peut débattre longuement des avantages et des défauts de cette approche.
Elle est en tout cas appréciée par les concepteurs d’IA telles que Bolt ou V0, car il s’avère que cette syntaxe est très facile à analyser et reproduire par un LLM.
Il est un peu plus difficile de générer du code structuré, comme du CSS, avec un grand modèle de langage.
Astro facilite l’intégration de Tailwind CSS. Pour l’installer, exécutez la commande :
npx astro add tailwind
Cette commande installe les packages utiles et met en place la configuration nécessaire.
Rien de plus à faire pour démarrer avec Tailwind dans Astro !
Définir le style revient donc en termes de code à manipuler des chaînes de caractères dans le template HTML du composant Astro, pour générer l’attribut “class”.
Cela est parfois un peu lourd, on oublie vite un espace entre deux classes. Par exemple le code suivant est erroné :
const classFromProps = "p-4";
---
<!-- il manque un espace ! -->
<button
class={classFromProps + "text-blue-500"`}
>Cliquez-moi</button>
Pour éviter ce problème, Astro fournit une directive class:list
qui permet de définir les classes comme un tableau, et aussi de gérer le style conditionnel.
Par exemple un bouton qui est toujours rond, mais doit être rouge seulement quand l’attribut “variant” vaut “danger”.
<button
class:list={[
"rounded",
{ "bg-red-500": variant === "danger"}
]}
>Cliquez-moi</button>
En résumé, Tailwind CSS s’intègre particulièrement bien avec Astro. Ce n’est pas le seul choix pour styler votre application, mais il s’agit d’une solution à envisager sérieusement lorsqu’elle s’avère répondre à vos contraintes.
Vous avez apprécié cette ressource ?
Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel