J'utilisais mal Tailwind, donc vous n'êtes pas obligé de le faire-js tutoriel-php.cn

Il y a environ 3 ans, je suis tombé sur Tailwind CSS, une superbe bibliothèque pour le développement de sites Web. Pour que cet article reste raisonnablement court, je ne perdrai pas de mots pour le présenter. Il existe déjà de nombreuses sources sur lesquelles apprendre. Au lieu de cela, je souhaite partager l'histoire d'une erreur que j'ai continué à commettre à mes débuts avec Tailwind. Il n’est pas nécessaire de tomber dans le même gouffre que moi.

Tailwind brise le concept traditionnel des feuilles de style en cascade en encapsulant les règles CSS dans ce que l'on appelle des classes utilitaires. Au lieu de composer des règles CSS dans des fichiers .css, vous composez des noms de classe directement sur les éléments DOM. Bien que cette approche semble peu naturelle et étrange au début, elle commence rapidement à prendre du sens. Il m'a fallu environ une journée pour m'y mettre et maintenant je ne veux plus écrire du CSS simple, à moins d'y être obligé. Tailwind est parfaitement intégré à mon framework n°1 Nuxt et la simplicité de créer des sites Web réactifs et visuellement attrayants en quelques minutes est tout simplement géniale.

Il y a cependant un hic. Plus vous connaissez d’options et plus vous choisissez d’inclure de styles, le HTML peut devenir un chaos. Le deuxième problème que j’ai ressenti à mes débuts était de me répéter. En tant qu'adepte honorable du principe DRY, cela me faisait mal aux yeux de voir la même séquence de cours plusieurs fois dans mes modèles.

J'essayais d'optimiser cela.

La première idée était d'extraire la séquence des classes Tailwind en tant que variable chaîne. Dans Vue.js (Nuxt est construit sur Vue), cela ressemble à peu près à ceci.

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

Copier après la connexion

Enfin, il est plus facile à entretenir et à changer. La clarté est discutable. Surtout si vous avez les mêmes éléments tout autour de votre application et que vous devez transformer la définition en une constante de type global.

Je cherchais plus loin une meilleure solution.

Et j'ai découvert la directive @apply de Tailwind. Au fond, c’est comme une négation de tout le concept. Au lieu de placer des définitions directement sur des éléments concrets, vous pouvez créer votre propre sorte de feuille de style et la remplir de classes personnalisées et d'ajustements d'éléments. Seulement, au lieu de règles CSS simples, vous préparez des solutions à partir des classes utilitaires Tailwind.

Bizarre, mais il semblait que cela résoudrait mon problème mental avec les définitions en double.

Le tuteur de VueSchool et les documents Tailwind m'ont prévenu NE PAS de l'utiliser, mais naturellement je n'ai pas écouté.

I was using Tailwind wrong, so you don

J'ai créé quelques sites Web en utilisant cette approche. Cela a fonctionné. Problème résolu, ou ?

Avance rapide jusqu'à fin 2024. J'ai eu de nouvelles idées pour l'un de mes sites Web. J'ai commencé à coder. J'ai complètement oublié les manigances @apply que j'ai faites il y a plus d'un an. Et du coup, je me suis retrouvé incapable de mettre en place ma mise en page.

Bien qu'aucun style apparent n'ait été utilisé dans mon modèle, mes

n'étaient pas à leur place. Que se passe-t-il? J'ai ouvert la console de développement dans le navigateur pour étudier le HTML rendu. Des styles CSS leur étaient appliqués.

I was using Tailwind wrong, so you don

Quelques instants frustrants plus tard, j'ai trouvé le coupable.

Tout à coup, avoir :

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

Copier après la connexion

dans le fichier tailwind.css ne semblait pas une si bonne idée qu'en 2023.

Qui devrait savoir que j'aurai besoin d'autre chose un jour, hein ?

LEÇON #1

Ne jamais, jamais et jamais utiliser @apply globalement sur un sélecteur d'élément.

Bien que cela puisse sembler pratique lorsque vous élaborez un nouveau projet, cela peut vous nuire à long terme. Non seulement vous pouvez facilement l’oublier, tout comme moi. Cela rend également les choses moins flexibles. Un jour, vous reviendrez plus sage et prêt à vous en débarrasser - mais une fois que vous aurez supprimé le style global, la moitié du site fondé sur celui-ci se brisera de manière inattendue. Êtes-vous mentalement prêt à repenser l’ensemble du design ?

Personnellement, je recommanderais désormais de ne pas utiliser du tout @apply dans tailwind.css (si seulement j'avais le temps et la patience de l'arracher de tous mes projets où j'ai réussi à le mettre).

Si vous insistez toujours pour l'utiliser sans raison valable (""aime remplacer les styles dans une bibliothèque tierce" comme le disent les documents Tailwinds), utilisez-le au moins pour créer classes .

Avoir une classe .my-cool-css est excusable, car au moins vous devez l'attacher à l'élément que vous souhaitez styliser. Ainsi, tout le monde (y compris votre futur moi) pourra le voir là et pourra y trouver sa définition si besoin.

OUI, MAIS

Les candidats tentants qui enfreignent cette règle sont des éléments d'ancrage. Parce qu'il serait vraiment fastidieux de devoir attacher un attribut de classe à chaque .

Une alternative possible consiste à créer un composant de lien personnalisé enroulé autour de l'ancre (ou autour de intégré dans Nuxt). Mais cela ne vous plaira peut-être pas et je ne vous en voudrai pas.

En fait, l'utilisation de la directive @apply reste une solution de premier ordre.

Peut-être pouvez-vous créer encore plus d'exemples où les styles d'éléments globaux auraient du sens. Si vous êtes sûr à 100%, utilisez-les. Mais cela devrait toujours être une décision bien fondée.

LEÇON #2

La vraie raison pour laquelle vous avez des définitions de classe Tailwind trop longues/en double est une mauvaise conception de votre code.

Avec les frameworks JavaScript modernes comme Vue, vous aviez la possibilité de créer de petits composants réutilisables et de les assembler pour créer des solutions complexes. Utilisez-le.

L'exemple de bouton ci-dessus peut être transformé en ceci :

<-- MyButton.vue --->
<modèle>
  <bouton>



<p>Et juste comme ça, le code dupliqué a disparu.</p><p>En revanche, voir des chaînes de classes très longues me fait toujours penser que l'élément pauvre était accablé par trop de soucis. La meilleure chose à faire est de prendre du recul et de réviser les décisions qui vous y mènent.</p>

<p>Mon expérience est que vous pouvez créer de beaux designs avec seulement une poignée de classes Tailwind. Et si vous avez envie d’en ajouter davantage, ils ne devraient généralement pas être empilés sur un seul élément. C'est à peu près la même chose que créer un gros composant (ou une classe si vous préférez) qui fait tout. À un moment donné, vous devez vraiment arrêter d'ajouter des lignes et commencer à diviser les choses.</p>

<p>Dans le pire des cas, vous devriez pouvoir encapsuler des éléments CSS visuellement exigeants dans des composants séparés et ainsi minimiser la quantité d'interactions nécessaires. Mais pour être honnête, quelqu'un l'a probablement déjà fait et tout ce que vous avez à faire est de trouver la bonne bibliothèque de composants Tailwind à utiliser dans votre projet.</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!