Media Queries et Tailwind CSS

Adapter la mise en page aux différentes tailles d’écran est un défi pour de nombreux designers.

Une mise en page non responsive peut entraîner une mauvaise expérience utilisateur, affectant ainsi l’engagement et la satisfaction.

Cet article vous guide sur l’utilisation des media queries avec Tailwind CSS pour assurer un design responsive et adapté à tous les appareils.

Table de matière

Media Queries et Breakpoints Tailwind Propriétés CSS Grid pour Media Queries Media queries FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Passons maintenant aux media queries , indispensables pour adapter la mise en page en fonction des différentes tailles d’écran. Nous allons utiliser ces media queries avec CSS Grid dans Tailwind afin de rendre notre design responsive et adapté à tous les appareils.

Media Queries et Breakpoints Tailwind

Il existe dans Tailwind une équivalence des breakpoints que nous utilisons habituellement en CSS. Ces points de rupture permettent de définir des styles adaptés à différentes tailles d’écrans, comme sur les petits, moyens ou grands écrans.

Vous pouvez retrouver tous ces breakpoints et leurs classes associées directement dans la documentation officielle de Tailwind , comme vous le voyez à l’écran.

Nous allons maintenant modifier notre mise en page en utilisant les media queries pour adapter le nombre de colonnes selon la taille de l’écran. Pour cela, nous allons passer de trois colonnes par défaut, à deux colonnes à partir d’un certain point de rupture, puis à une colonne sur les petits écrans à partir du code suivant :

				
					
 <section class="grid-rows-auto lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid h-screen">
<div class="bg-orange-500 text-white text-center p-6">1</div>
<div class="bg-blue-500 text-white text-center p-6">2</div>
<div class="bg-green-500 text-white text-center p-6">3</div>
<div class="bg-red-500 text-white text-center p-6">4</div>
<div class="bg-gray-500 text-white text-center p-6">5</div>
<div class="bg-pink-500 text-white text-center p-6">6</div>
</section>

Dans ce code :

lg :grid-cols-3: sur les grands écrans (1024px et plus), la grille auratrois colonnes.
md :grid-cols-2: dès que l’écran atteint une taille moyenne (768px ou plus), la grille sera réduite àdeux colonnes.
sm :grid-cols-1: pour les petits écrans (moins de 640px), la grille passera àune seule colonne.
grid-rows-auto :ici nous pouvons compter sur cette classe pour que l’espace entre les lignes puisse s’adapter selon le nombre de colonnes.

Il suffit donc d’ajouter le nom du breakpoin suivi de « : » puis la classe concernée pour ajouter un media queries. Cette approche vous permet de rendre votre mise en page flexible et responsive en fonction des tailles d’écrans comme vous le voyez dans la fenêtre du navigateur suivante :

Astuce Pratique : Noter qu’ici, on a utilisé les médias queries uniquement avec CSS Grid mais cela est également valable avec n’importe quelle classe que vous utilisez.

Par exemple, je vais changer la couleur d’un rectangle quand je change la taille de l’écran :

Code :

				
					
 <div class="lg:bg-emerald-500 md:bg-yellow-400 sm:bg-red-400 bg-emerald-500 mx-auto my-12 text-white text-center py-24 rounded ">Je suis un caméléon</div>

Résultat :

Propriétés CSS Grid pour Media Queries

Ajoutons, à présent, les propriétés CSS et les classes Tailwind relatives aux media queries que nous avons vu. Pour faire simple, nous allons placer la propriété CSS @media(min-width : X) et les différents breakpoints dans un tableau.

Vous pouvez voir le code de cette partie du tableau via :

Le Code suivant, et l’ajouter dans votre documentation de base :

				
					
 <h2 id="media-queries" class="rb-heading-index-3 text-center font-bold text-xl mb-3">Media queries</h2>
<section class="bg-white w-3/4 m-auto p-3 border-2 rounded-xl mb-10">
<div class="flex justify-between border-b-2">
<p class="font-bold">Propriété</p>
<p class="font-bold">class</p>
</div>
<div class="flex justify-between border-b-2">
<p>@media (min-width: X)</p>
<p>sm:(640px), md:(768px), lg:(1024px), xl:(1280px), 2xl:(1536px)</p>
</div>
</section>

Ou le lien CodePen suivant pour voir le rendu directement :

CodePen : Retrouver l’ensemble de la documentation dans le CodePen suivant qui contient notamment la partie concernant les médias queries.

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment utiliser les media queries avec Tailwind CSS ?

Pour utiliser les media queries avec Tailwind CSS, il suffit d’ajouter le nom du breakpoint suivi de ‘:’ puis la classe CSS souhaitée. Cela permet d’adapter les styles en fonction de la taille de l’écran. Par exemple, utilisez ‘lg:grid-cols-3’ pour trois colonnes sur les grands écrans (1024px et plus), ‘md:grid-cols-2’ pour deux colonnes sur les écrans moyens (768px ou plus), et ‘sm:grid-cols-1’ pour une colonne sur les petits écrans (moins de 640px).

Quels sont les breakpoints disponibles dans Tailwind ?

Tailwind CSS propose plusieurs breakpoints standards : ‘sm’ pour les écrans de 640px et plus, ‘md’ pour 768px et plus, ‘lg’ pour 1024px et plus, ‘xl’ pour 1280px et plus, et ‘2xl’ pour 1536px et plus. Ces breakpoints permettent d’adapter le design à différentes tailles d’écrans, assurant ainsi un design toujours optimal.

Comment rendre un design responsive avec Tailwind ?

Pour rendre un design responsive avec Tailwind, utilisez des classes de grille combinées avec des breakpoints pour ajuster la mise en page selon la taille de l’écran. Par exemple, une grille peut passer de trois à deux puis à une colonne en utilisant ‘lg:grid-cols-3’, ‘md:grid-cols-2’, et ‘sm:grid-cols-1’. Cette flexibilité garantit que le contenu est toujours bien présenté, quelle que soit la taille de l’écran.

Comment modifier les styles en fonction de la taille de l'écran avec Tailwind ?

Pour modifier les styles en fonction de la taille de l’écran avec Tailwind, utilisez les classes de breakpoints. Par exemple, pour changer la couleur d’un élément selon la taille de l’écran, vous pouvez appliquer ‘lg:bg-emerald-500’, ‘md:bg-yellow-400’, et ‘sm:bg-red-400’. Ces classes permettent de personnaliser l’apparence des éléments pour différents formats d’écran.

Où trouver la documentation des media queries dans Tailwind ?

La documentation officielle de Tailwind CSS contient des informations complètes sur l’utilisation des media queries et des breakpoints. Vous pouvez accéder à cette documentation via le lien ‘https://tailwindcss.com/docs/screens’, qui vous fournira des exemples et des instructions détaillées pour utiliser efficacement les media queries dans vos projets.

Conclusion

En maîtrisant l’utilisation des media queries dans Tailwind, vous pouvez créer des designs adaptatifs qui améliorent l’expérience utilisateur sur tous les appareils. Comment allez-vous intégrer ces techniques dans vos prochains projets de design ?