Mes 15 plugins et ressources CSS Tailwind préférés

Tailwind CSS facilite le style et la conception de pages réactives. Découvrez les 15 meilleurs plugins et ressources CSS Tailwind que vous devez savoir si vous prévoyez de l'essayer (ou si vous l'utilisez déjà).

Habituellement, la discussion porte sur les frameworks JavaScript: React, Vue , Svelte… Mais il y a quelques mois, j'ai commencé à me passionner pour un joli petit framework CSS qui rendait le style et la conception de mes pages réactives amusantes et faciles. Présentation de ? Tailwind CSS!

Je sais qu'il existe d'innombrables articles sur le sujet, et je ne suis pas là pour vous ennuyer avec un autre tutoriel CSS Tailwind. ?

D'un autre côté, je vais vous expliquer exactement mon processus pour apprendre rapidement l'écosystème qui entoure un outil donné. Je cherche sur Google la liste officielle des géniaux pour cette technologie particulière (c'est-à-dire pour Tailwind CSS: Awesome TailwindCSS ) et je regarde presque tous les liens. Cela prend généralement quelques heures, mais quand c'est fait, la valeur que vous obtenez en suivant cette pratique est tout simplement colossale. ? Sérieusement! #tremendous

Quoi qu'il en soit… Donc, Tailwind CSS est encore relativement nouveau par rapport aux autres frameworks CSS. Néanmoins, il existe d'excellents plugins et ressources que vous devriez connaître si vous prévoyez de jouer avec (ou si cela fait déjà partie de votre flux de travail). Pour vous faire gagner du temps, j'ai résumé mes préférés dans cet article. ?

Alors sans plus tarder, commençons! ?‍?

1. Apprenez Tailwind plus rapidement avec un CheatSheet

Les classes utilitaires de Tailwind CSS sont assez faciles à apprendre. Mais à première vue, se souvenir de toutes ces classes peut être un peu délicat. Un bon conseil que je recommande (pour vous éviter d'avoir à aller et venir à la documentation) est de vous fier à un aide-mémoire.

Voici les meilleurs que j'ai pu trouver:

? Ressource no. 1 : Aide-mémoire Tailwind de NerdCave .

? Ressource no. 2 : Aide-mémoire Tailwindcss par umeshmek .

? Ressource no. 3 : Tailwind.css Cheatsheet de LeCoupa .

? N'hésitez pas à ajouter celui avec lequel vous êtes le plus à l'aise.

2. Implémentez un thème du mode sombre pour votre application

Oyé, oyé, les gens du mode sombre! Si vous cherchiez un moyen simple d'inclure des variantes du mode sombre dans Tailwind CSS, ne cherchez plus! ??‍♀‍

Les plugins suivants vous aideront à publier différents thèmes afin que vos utilisateurs puissent changer rapidement les couleurs de vos interfaces. Ils sont assez différents dans leur façon de travailler, donc je vous suggère de prendre quelques minutes avant de choisir l'un de ces deux:

? Plugin : tailwindcss-theming .

? Plugin : tailwindcss-dark-mode .

Si vous cherchez une solution simple avec des variables CSS, vous pouvez également regarder la vidéo ci-dessous. [19659003] ? Vidéo : Sélecteur de thème en mode sombre – Tailwind CSS & Gridsome .

3. Un utilitaire Spinner que vous pouvez implémenter en un clin d'œil

? Plugin : tailwindcss-spinner .

Chaque application a besoin d'un chargeur, ??‍♀‍ c'est juste un fait. Heureusement, j'ai trouvé cette extension qui vous permet d'implémenter et de personnaliser l'un des nombreux jolis spinners (en termes de couleur, taille, bordure et vitesse) ⏱ en moins d'une minute. Ensuite, vous pourrez l'utiliser avec une seule classe d'utilité. Personnellement, c'est l'une de mes extensions Tailwind préférées. ?

4. Classes d'élévation pour agrandir votre interface

? Plugin : tailwindcss-elevation .

Si vous avez déjà utilisé Material Design, vous connaissez probablement ces effets d'élévation.

La bonne nouvelle est qu'en passant à Tailwind, vous n'aurez pas à les redessiner vous-même. Ce plugin est livré avec 25 classes .elevation - * ? qui à mon avis sont bien plus que suffisantes pour satisfaire votre besoin d'effets d'élévation.

5. Interfaces de gauche à droite (LTR) et de droite à gauche (RTL)

? Plugin : tailwindcss-dir .

? Plugin ]: tailwindcss-rtl .

En fonction de ce que vous essayez de réaliser, ces deux plugins vous aideront à créer des mises en page LTR et RTL. Vous pourrez utiliser une variante de direction personnalisée dans votre projet et accéder à des classes d'utilitaires intelligentes telles que ps - * ms - * ou start - * .

6. Rapport hauteur / largeur réactif

Si par le passé vous avez essayé d'intégrer des vidéos ou des objets spécifiques avec un rapport hauteur / largeur strict, vous avez peut-être eu des problèmes de réactivité.

1️⃣ Ce premier plugin vous aidera à définir les différents ratios que vous besoin dans votre fichier de configuration et générez toutes les classes utilitaires (ainsi que leurs variantes responsives).

? Plugin : tailwindcss-aspect-ratio .

2️⃣ Going one pas plus loin, ce dernier plugin (qui utilise le premier) vous donnera quelques classes supplémentaires que vous pourrez ajouter à vos éléments incorporés pour les rendre réactifs.

? Plugin : tailwindcss -réponse-incorporé .

7. Beaux dégradés avec vent arrière

Voici un moyen simple de créer des images époustouflantes dégradés dans Tailwind CSS! 1965

? Plugin : tailwindcss-gradients .

? Plugin : tailwindcss-border-gradients . [19659003] Que vous essayiez de générer des classes utilitaires pour vos dégradés ou d'implémenter de beaux dégradés de bordure, ces deux packages résoudront les deux problèmes. ? Ils sont régulièrement mis à jour, donc je vous recommande de les utiliser si vous voulez créer des interfaces colorées fantaisie.

☝? Un autre outil que vous devriez jeter un œil est le générateur de nuances de couleurs.

? Tool ]: Color Shades Generator .

Color Shades Generator vous fournit non seulement des noms et des variantes pour une couleur donnée, mais aussi le code à injecter dans votre configuration CSS pour les nuances qu'il génère. N'est-ce pas quelque chose?! ?

8. Générer des classes pour commander facilement des éléments flexibles

? Plugin : tailwindcss-flexbox-order .

Avec cette extension, vous pourrez configurer et générer la commande flexbox classes avec toutes leurs variantes réactives.

Par défaut, ? voici les classes d'utilité générées:

 .- order-1   {
  order :  -  1 ; 
} 

 .order-0   {
  order :   0 ; 
} 

 .order-1 [19659054] {
  commande :   1 ; 
} 

 .order-2   {
  order :   2 ; [19659058]} 

 .order-3   {
  order :   3 ; 
} 

 .order-4   {
  order [19659056]:   4 ; 
} 

 .order-5   {
  order :   5 ; 
} 

9 . Générer des utilitaires de typographie et des composants de style de texte

Si vous avez beaucoup de règles strictes pour votre typographie, vous pourriez être intéressé par ce plugin ?:

? Plugin : tailwindcss-typography .

Vous pourrez générer de nombreuses classes utilitaires pour personnaliser l'indentation, l'ombre du texte, les traits d'union, la variante de police, etc.

10. Utilisez des modèles de héros dans votre application.

Probablement mon extension Tailwind préférée ?:

? Plugin : tailwind-heropatterns .

Si vous n'êtes pas familier avec ] Hero Patterns c'est une collection de motifs de fond SVG répétables.

Avec ce plugin Tailwind, vous obtiendrez 80+ classes utilitaires qui vous permettront de les utiliser TOUS dans votre projet.

11. Generate Truncate Multiline Utilities

? Plugin : tailwind-truncate-multiline .

Ce plugin va générer toutes les classes utilitaires définies dans votre fichier de configuration pour tronquer votre texte ✂️ en un nombre donné de lignes.

 .truncate- [key] -lines  {
   'overflow' :   'hidden' ,
   'affichage' :   '- webkit-box' ,
   "- pince-ligne-webkit" :  [value],
   "- webkit-box-orient" :   "vertical" ,
} 

12. Afficher le point d'arrêt actuel en mode développement

Ce composant affichera l'écran actuellement actif (sm, md, lg, xl, etc.) afin que vous puissiez créer vos conceptions réactives plus rapidement. ? Il vous suffit d'ajouter la classe debug-screens à votre balise body lorsque vous êtes en mode développement.

? Plugin : tailwindcss -debug-screens .

⚠️ Si vous utilisez Nuxt.js, je vous recommande d'utiliser nuxt-breaky à la place. ?

? Plugin : nuxt-breaky .

Si vous voulez profiter pleinement des propriétés CSS Scroll Snap dans Tailwind CSS, ce plugin est

? Plugin : tailwindcss-scroll-snap .

Si vous n'êtes pas familier avec CSS Scroll Snap, ??‍? c'est propriété CSS qui rend le comportement de défilement accrochant, verrouillant la fenêtre à un point spécifique (que vous indiquez) à chaque défilement. Par opposition à un défilement linéaire qui se déplace n'importe où sur une page à la vitesse du contrôleur (souris, touche

Les propriétés d'accrochage au défilement CSS sont probablement les classes les plus pratiques pour créer rapidement un curseur réactif. Si vous devez vous y fier dans l'un de vos projets Tailwind, cette extension générera toutes les classes d'utilitaires dont vous aurez besoin: .snap-start .snap-end ] .snap-center etc.

14. Générer des styles pour les flèches triangulaires basées sur CSS avec bordure et arrière-plan configurables

Pourrait ajouter une flèche rapide pour vos menus contextuels ou vos infobulles plus facile? ?

? Plugin : tailwindcss-tooltip-arrow-after .

Et en passant, vous pouvez personnaliser presque tout dans le fichier de configuration (bordure-couleur, bordure -largeur, arrière-plan, taille, décalage, etc.).

15. Conversion d'un projet existant en un projet Tailwind One

Le premier plugin vous aidera à convertir tout votre code CSS Bootstrap en classes utilitaires Tailwind. L'autre est plus générique et fonctionnera avec presque tous les projets.

? Plugin : tailwindo .

? Plugin : tailwind- shift .

? C'est une sorte de maaaaagic ?‍♀‍!

Bonus 1. Extensions d'éditeur pour VS Code Addicts

Le premier outil est un incontournable. Si simple mais si utile! ? Il vous fournira des suggestions pour que vous n'ayez pas à vous souvenir et à saisir les noms complets de toutes ces classes CSS. Neat, non?

? Tool : Tailwind CSS IntelliSense .

? Tool : Headwind .

The le dernier vous rendra beaucoup plus productif. Laissez-moi vous expliquer.

Je suis un grand fan de code beau et ordonné, vous pouvez donc deviner que l'ajout de tonnes de classes CSS dans Tailwind est un cauchemar visuel pour moi. ?

Alors imaginez mon plaisir ? quand j'ai trouvé ce trieur de classes CSS Tailwind: Headwind, un trieur de classes CSS basé sur VS Code Tailwind qui s'exécute lors de la sauvegarde.

Bonus 2. Créez votre propre plugin Tailwind! avez un autre problème que l'écosystème de Tailwind ne couvre pas encore? Eh bien, il est peut-être temps de créer votre plugin! ?

Si vous cherchez de l'inspiration sur la façon de faire cela, ce référentiel vous sera utile et vous fournira quelques exemples afin que vous puissiez rapidement comprendre le processus.

---

C'est ça tout ce que j'ai pour toi aujourd'hui. Alors allez-y, codez, profitez-en et restez génial! ?

Et n'oubliez pas de me contacter dans les commentaires si vous avez quelque chose que vous pensez que nous devrions ajouter à cette liste, ou vous pouvez me contacter sur Twitter @RifkiNada . ?

---