Illustration for the postStyler vos composants Astro avec Tailwind CSS

Styler vos composants Astro avec Tailwind CSS

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.

Styler avec des classes utilitaires

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.

Pourquoi Tailwind remplace aujourd’hui 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 :

Image de profil stylée avec Tailwind

Détaillons ces classes utilitaires :

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

Testez vous-même en installant Tailwind dans un projet Astro

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 !

Gérer les classes utilitaires aisément avec les directives 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>

Tailwind et Astro fonctionnent très bien ensemble

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

Voire toutes les ressources

Partager sur Bluesky Partager sur X
Flux RSS