Sauter dans le vent arrière

Bien que vous n’ayez peut-être pas besoin de Tailwind, cela peut être d’une grande aide avec les meilleures pratiques en matière de style, de création de modes sombres et de gestion des requêtes multimédias.

https://www.youtube.com/watch?v=mr15Xzb1Ook

Qu’est-ce que Tailwind ?

Tailwind est une classe utilitaire CSS qui peut être utilisée en HTML ou dans n’importe quel framework. Il suit les règles de conception afin que vos couleurs s’enchaînent, que vos éléments soient correctement espacés et que vos applications mobiles évoluent de manière transparente. Cela rend également l’animation CSS aussi simple que 1, 2, 7. Je veux dire, vous compterez en fait dans le bon sens avec Tailwind. 😶

Ai-je besoin d’un vent arrière ?

Non. Vous pouvez très bien fonctionner lors de la création d’un site Web sans Tailwind. Cependant, savez-vous quelles couleurs vont bien ensemble ? Savez-vous quoi écrire manuellement dans une classe chaque fois que votre texte doit être vert ? Savez-vous comment bien organiser vos feuilles de style ? Créez-vous une nouvelle feuille de style pour le mode sombre ? Êtes-vous à jour avec toutes les règles CSS, SASS, SCSS, LESS ou PostCSS ? Est-il préférable d’utiliser un identifiant d’élément, une classe, un nom de classe ou un style en ligne ? Connaissez-vous les pratiques les plus courantes et les meilleures en matière de requêtes média ?

Si tel est le cas, restez fidèle au CSS vanille. Par contre, j’utiliserai le grand T.

Apprendre le vent arrière

Si vous naviguez depuis des années sans Tailwind, vous devez l’apprendre. Cela vous facilitera simplement la vie.

J’ai vu des articles de blog et des vidéos indiquant que vous n’avez pas besoin d’apprendre Tailwind, apprenez d’abord CSS et vous connaissez Tailwind. C’est de la foutaise. Tailwind n’est que le niveau 2 de CSS, et ils se complètent.

La plupart des sceptiques ne l’ont jamais essayé. Une fois qu’ils l’ont fait, ils décident invariablement de s’y tenir. Si vous connaissez CSS, vous le saurez mieux avec Tailwind.

Exemple de boîte flexible

Si vous lisez le W3 Écoles CSS Flexbox page, vous verrez une liste de commandes flexbox, qui ne vous aideront pas vraiment à utiliser l’équivalent Tailwind.

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Parfois, ces exemples sont excellents, mais ils ne nous donnent pas une vue d’ensemble. Le Tailwind CSS Flex la page traduit essentiellement pour vous le nom des commandes dans Tailwind. Vous pouvez voir un monde réel center cas d’utilisation.

<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

Mais je ne pense pas avoir vraiment appris complètement de cette façon. J’ai remarqué que je travaille à rebours. Si vous regardez le code à l’intérieur d’un Barre de navigation de l’interface utilisateur Tailwindtu verras QUAND pour utiliser une flexbox.

<div class="relative flex h-16 items-center justify-between">
...
</div>

Vous commencerez à voir les modèles et les meilleures pratiques pour CSS. CSS existe depuis des années et il existe de nombreux mauvais exemples. Débordement de pile en a par exemple, mais uniquement parce que CSS a beaucoup évolué depuis 2011 et lorsque HTML5 est sorti en 2014. Depuis lors, les gens ont expérimenté et trouvé les meilleures pratiques sur la façon de centrer un div. Une flexbox semble être la meilleure solution dans de nombreux cas, mais vous ne le savez peut-être pas. Ne me lancez pas dans les problèmes de compatibilité des navigateurs qui se terminent enfin ; sauf TOI Safari, je te vois !

Code VS

Vous devrez peut-être installer quelques extensions VS Code pour mieux utiliser Tailwind. Si vous utilisez Vim, vous êtes un baby-boomer en programmation et je ne suis vraiment pas désolé pour vous. Viens avec le spectacle, mec.

• Tailwind CSS IntelliSense – C’est un must. Installez-le et vous aurez la saisie semi-automatique. Parfois, il suffit d’appuyer sur ctrl+space sous Windows ou ^+space sur Mac.
• Pliage par vent arrière – Cela permet de cacher tous les cours fous et répétitifs de quelques points. Certaines personnes aiment ça. Je ne trouve pas cela utile, car je veux voir ce que fait mon composant.

Il y en a une vingtaine d’autres, mais ce sont ceux-là qui méritent d’être mentionnés et que j’ai essayés. Plus vous avez d’extensions, plus VS Code peut être lent, alors faites ce que vous voulez.

Composants

https://twitter.com/surjithctly/status/1638194381017456645

Une chose qui me dérange Interface utilisateur Tailwind, c’est que les exemples ne sont que du HTML pur. Je ne sais pas si Tailwind est même utile sans framework. Un framework vous permet de créer des composants pour ne pas répéter tout le code fou. C’est pourquoi je n’utilise pas Pliage par vent arrière. Si vous créez correctement vos composants, vous ne répéterez pas de code.

@appliquer

La directive apply vous permet de déclarer des classes de classes. C’est une façon de gérer la répétition :

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

https://twitter.com/adamwathan/status/1226511611592085504?lang=fr

Cependant, le créateur de Tailwind s’oppose à son utilisation, même si la plupart des gens pensent qu’il a sa place. Personnellement, je ne l’utilise pas car je ne veux pas déclarer plus de classes et certaines bibliothèques utilisent simplement des variables sous le capot. SmelteJS copié est Material UI écrit avec Tailwind et utilise simplement le concept de variable (n’utilisez pas cette bibliothèque sauf à titre de référence, car personne ne la maintient). Vous devriez également payer UnoCSS si vous souhaitez voir plus d’options d’abstraction et un concurrent Tailwind.

Cadres d’interface utilisateur

De nombreux frameworks d’interface utilisateur utilisent réellement Tailwind sous le capot. Créer un carrousel ou faire fonctionner un menu nécessiterait JS ainsi que CSS, donc les gens ont construit des frameworks d’interface utilisateur ; nous ne voulons pas réinventer la roue.

• margueriteUI – semble fonctionner avec tous les principaux frameworks
• Squelette – Je suis un grand fan de ce framework Svelte UI
• Flowbite – Vous voyez probablement souvent cela sur Google lorsque vous recherchez un composant Tailwind
• Éléments de vent arrière – Un framework d’interface utilisateur de type matériel

Tailwind accélère tout simplement la productivité. Honnêtement, je ne me vois pas y retourner. Je veux juste être plus productif. Je ne veux pas m’inquiéter de nommer les choses, ni de savoir comment centrer un div jamais. J’espère juste qu’il pourra être intégré à HTML6.

Essayez-le avec le Guide du cadre.