Vent arrière ou pas vent arrière, telle est la question

Bien-aimé et méprisé, Tailwind CSS fait ressortir des opinions bien arrêtées. Alyssa Nicoll joue avec pour que vous puissiez voir quel côté vous choisirez.

Tailwind CSS est sans doute l’un des outils de développement les plus controversés que j’ai rencontrés. Soit vous l’aimez, soit vous le détestez.

De par sa nature, Tailwind CSS définit les styles CSS dans des classes utilitaires réutilisables, à l’opposé des croyances de structuration CSS traditionnelles autour des styles centrés sur les composants.

Aimez-le ou détestez-le, cependant, il y a une chose sur laquelle nous pouvons tous être d’accord : les docs de Tailwind sont LIT. Donc, en dehors de cette liste de sujets que je vais aborder aujourd’hui, je vous encourage fortement à consulter leur documents.

Contenu

Qu’est-ce que Tailwind ?

Tailwind a en fait deux parties (peut-être plus – je connais les deux): Interface utilisateur Tailwind et CSS vent arrière. Tailwind CSS est une bibliothèque gratuite basée sur des utilitaires que vous pouvez ajouter à vos applications Web JS pour commencer à styliser rapidement votre interface utilisateur. Tailwind UI est la bibliothèque de composants d’interface utilisateur de Tailwind qui coûte de l’argent. Donc, désormais, dans l’article, quand je dis « Tailwind », je fais référence à Tailwind CSS.

Utilitaire d’abord par rapport aux autres

Tailwind fait un excellent travail (comme je l’ai déjà mentionné) pour expliquer le utilitaire d’abord concept dans leurs docs. Cependant, je vais essayer ma propre version tl;dr de ce concept. Dans votre application JS moyenne, un jour donné, vous pouvez voir des styles tels que celui-ci pour une carte :

<div class="card">...</div>

.card {
  background: purple;
  border-radius: 6px;
  max-width: 320px;
  padding: 40px;
  margin-bottom: 20px;
}

Faire cette même carte d’une manière utilitaire d’abord ressemblerait à ceci :

<div class="bg-violet-200 rounded-md max-w-sm p-10 mb-5">...</div>

Pour quelqu’un qui est extrêmement à l’aise avec les fichiers CSS, jusqu’à présent, vous aurez l’impression que Tailwind n’est qu’un pur blasphème. Même leurs docs abordent la consternation que beaucoup ont ressentie à son égard au départ. Ce n’est qu’après avoir essayé cette bibliothèque que vous comprendrez son véritable charme.

« Lorsque vous réaliserez à quel point vous pouvez travailler exclusivement en HTML avec des classes utilitaires prédéfinies, travailler de toute autre manière ressemblera à de la torture. » — Documents TW

Installer Tailwind CSS

Pour commencer à l’essayer, vous devez installer Tailwind et, dans certains cas, une ou deux dépendances. j’ai utilisé le Démarrage angulaire guide que j’ai trouvé sur leur site et qui devait essentiellement suivre ces deux étapes :

1. npm install -D tailwindcss préfixe automatique postcss
2. npx tailwindcss init

Commencer

Après l’installation, j’ai pu commencer à utiliser Tailwind, ce qui signifiait d’abord inclure ces directives en haut de mon fichier CSS global :

@tailwind base;
@tailwind components;
@tailwind utilities;

Ceux-ci, comme on dit, comprenaient les styles de base de Tailwind, ce qu’on appelle « pre-flight », qui est une réinitialisation du navigateur, leurs styles de composants et leurs styles de classe utilitaire. Si jamais vous pénétrez profondément dans Tailwind, je vous recommande vivement regarder cette vidéo sur la composition des utilitaires Tailwind afin que vous puissiez mieux comprendre ce qu’ils incluent, les questions d’ordre et comment la directive @layer peut atténuer certains problèmes concernant cette commande.

Les bases du vent arrière

Le style dans Tailwind est simple comme bonjour (si vous utilisez le Extension de code VS). Il y a quelques utilitaires peu clairs (comme m pour la marge et p pour le rembourrage), mais la plupart des sélecteurs sont très simples.

Ici, j’ai encore plus stylisé les éléments internes du composant de carte avec Tailwind fun :

<div class="bg-violet-200 rounded-md max-w-sm p-10 mb-5">
  <h1 class="text-2xl mb-1">Styling a card component!</h1>
  <div class="w-[100%] h-[1px] bg-purple-600"></div>
  <p class="text-xs mt-5 mb-2">The card has the following attributes:</p>
  <ul class="list-disc px-5 text-sm">
    <li>purple background</li>
    <li>rounded corners</li>
    <li>a max width</li>
    <li>text center aligned</li>
    <li>padding within itself</li>
    <li>bottom margin underneath it</li>
  </ul>
</div>

Et voici une capture d’écran de ce que Extension de code VS fait pour vous au survol :

Donc, comme vous pouvez le voir, mb-2 est une classe donnant à l’élément 8px de marge en bas. Vous pouvez spécifier davantage la marge et le rembourrage avec des éléments tels que py-10 pour le rembourrage supérieur et inférieur ou px-10 pour le rembourrage gauche et droit. Comme vous l’avez vu ci-dessus, vous pouvez même spécifier des côtés individuels : t – Haut, r – droit, b – fond, l – la gauche.

Personnalisation des sélecteurs Tailwind avec des valeurs arbitraires

J’ai également donné à la bordure inférieure div sous le titre une largeur de 100% en utilisant des crochets. C’est ainsi que vous ajoutez propriétés personnalisées dans Tailwind (lorsque leur liste d’options ne suffit pas).

Mises en page dans Tailwind & Responsive Design

Des choses comme flexbox et grid sont, bien sûr, des utilitaires intégrés dans Tailwind.

Cette mise en page réactive avec des cartes de tailles différentes a été créé en appliquant flex à l’emballage :

<div class="flex flex-wrap gap-5"> ... </div>

Alors que cette disposition plus complexe a été créé en utilisant une combinaison de flexbox et de grille :

Ainsi, peu importe la quantité ou le peu de contenu, le pied de page reste en bas. (Grâce au contenu « principal » ayant flex-grow de 1 et la page entière étant une colonne flexible. Notez que j’y parviens en utilisant Angular’s
:host sélecteur.)

Directives vent arrière

Ici, nous profitons de Tailwind @apply directive pour ajouter une classe utilitaire dans notre CSS. Ceci est utile lorsque les sélecteurs répétitifs deviennent longs dans votre HTML, ou lorsque vous essayez de styliser quelque chose qui n’existe pas dans le document HTML (le wrapper hôte généré par Angular) :

:host {
  @apply flex flex-col;
}

L’en-tête lui-même combine à la fois flex et grille (parce que pourquoi pas ? !). Dans l’en-tête, les éléments s’étendent horizontalement dans une grille CSS à deux colonnes. À l’intérieur de la colonne de gauche se trouve la navigation avec une disposition horizontale également, mais celle-ci est causée par une ligne flexible.

<header class="grid grid-cols-2 items-end">
  <img src="..." alt="azalea flower logo" class="max-w-[100px] px-3 py-2">
  <nav class="flex flex-wrap justify-start">
    <a ... class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Home</a>
    <a ... class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Team</a>
    <a ... class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Projects</a>
    <a ... class="font-medium px-3 py-2 text-slate-700 rounded-lg hover:bg-slate-100 hover:text-slate-900">Reports</a>
  </nav>
</header>

J’ai créé cette fusion pour essayer de vous montrer combien d’itinéraires différents existent pour réaliser les mises en page du Web moderne. Il n’y a pas qu’une seule « vraie » voie. Heureusement pour nous, Tailwind prend en charge l’itinéraire que nous choisissons pour la mise en page (même le positionnement, si tel est votre souhait).

Un vent arrière animé

Les animations dans Tailwind se composent de deux sections principales (comme avec CSS) : les transitions lors de la modification des propriétés et les animations d’images clés pour les éléments nécessitant plus de deux états. Dans ce simple exemple d’animation de bouton que j’ai construit, je démontre un bouton qui utilise une transition pour son état de survol et un autre qui ne l’est pas :

<button class="my-16 py-2 px-3 text-xl bg-purple-100 text-purple-500 hover:bg-purple-200">Let's Get Started</button>
<button class="my-16 py-2 px-3 text-xl bg-purple-100 text-purple-500 **hover:bg-purple-200 hover:-translate-y-1 hover:scale-110 transition ease-in-out delay-150 duration-300**">Find out more!</button>

Ici, vous pouvez voir que nous utilisons hover: pour appliquer des classes supplémentaires pendant que le bouton est survolé. Ceux-ci sont appelés états en CSS et il y en a beaucoup d’autres (comme actif et focus) qui Tailwind prend également en charge. Au survol, pour le second bouton on est :

• changer la couleur d’arrière-plan en un violet plus foncé : hover:bg-purple-200
• déplacer le bouton d’un pixel vers le haut : hover:-translate-y-1
• agrandissant le bouton de 10% : hover:scale-110
• et en ajoutant une transition avec une fonction de synchronisation, un retard et une durée spécifiés : transition ease-in-out delay-150 duration-300

Ces classes utilitaires se transforment en ce CSS :

En ce qui concerne les animations plus approfondies, Tailwind en a quelques-unes intégrées, comme la rotation, qui anime ce demi-cercle pour indiquer le chargement :

Vous pouvez en savoir plus sur animate-spin dans la documentation, ainsi que d’autres animations intégrées (comme ping et pulse) ici : https://tailwindcss.com/docs/animation#basic-usage.

Fonctions et directives Tailwind

Il existe deux fonctions personnalisées dans Tailwind. Ici j’utilise screen()une fonction de requête multimédia que vous pouvez utiliser pour envelopper les styles qui seront appliqués lorsque cette exigence de taille d’écran sera satisfaite :

@media screen(sm) {
  main {
    background-size: 200%;
    animation: portable-heater 5s ease-in-out infinite alternate;
  }
}
@keyframes portable-heater {
  0% {
    background-position: left bottom;
  }
  50% {
    background-position: right top;
  }
  100% {
    background-position: left bottom;
  }
}

Vous pouvez en savoir plus sur le Tailwind fonctionne ici.

Prêt pour la production

Être prêt pour la production dans Tailwind utilisé pour venir avec beaucoup plus de travail dans Angular. Avec la dernière version de Tailwind, tout ce dont vous avez besoin est de minifier pendant la construction :

npx tailwindcss -o build.css --minify

Quand Tailwind n’est pas la solution

Tailwind était vraiment très amusant à travailler et cela rend l’échafaudage de votre vision si incroyablement rapide. C’est aussi un outil merveilleux pour créer plus de cohérence dans vos styles.

je l’ai intégré avec un projet angulaire qui utilisait Composants de l’interface utilisateur de Kendo pour donner à l’application un mode sombre. Ils ont tous les deux très bien joué ensemble et je n’ai eu aucun problème à intégrer Tailwind dans une application Angular utilisant déjà une bibliothèque de composants.

Je pense que Tailwind est génial pour votre équipe de développeurs full-stack qui ont beaucoup à faire et qui peuvent déjà rencontrer des problèmes d’incohérence dans l’interface utilisateur et l’incapacité de se déplacer rapidement pour créer l’interface utilisateur.

Je pense que Tailwind est pas génial pour les développeurs frontaux qui aiment créer des maquettes parfaites au pixel près et qui doivent faire beaucoup de travail personnalisé sur le CSS et l’interface utilisateur. Tailwind ne fera que gêner ce développeur, car il maîtrise déjà les tenants et les aboutissants du CSS et l’utilise rapidement à son avantage. Ce serait comme dire à un maître cuisinier : « Je veux que vous utilisiez ce livre de recettes pour cuisiner votre plat préféré que vous avez mémorisé par cœur et fait cent fois ». Le chef vous jetait le livre au visage alors qu’il enfilait son tablier usé. (Tout comme le développeur frontend qui aime vraiment écrire du CSS.)

Dans l’ensemble, en tant que personne qui aime plutôt écrire du CSS elle-même, j’ai passé un moment merveilleux à utiliser cette bibliothèque utilitaire et je pense que n’importe qui peut aussi, s’il y va avec un esprit ouvert.