Affaires, contre et cas d’utilisation du monde réel

Explorez CSS Tailwind – l’un des cadres CSS les plus populaires – et comment l’utiliser dans le monde réel.

La cohérence dans les pratiques de codage est la pierre angulaire du développement de logiciels pratiques. Les guides de style de codage offrent un cadre standardisé pour écrire du code clair, maintenable et évolutif. Ces guides sont particulièrement utiles pour les ingénieurs frontend travaillant sur les systèmes de conception, où l’uniformité dans les conventions de dénomination et la structure affecte directement la collaboration et l’efficacité.

Pour une plongée plus profonde dans l’importance des guides de style codage et de certaines méthodologies populaires, consultez Guides de style de codage – une approche standardisée pour écrire du code.

Pour en savoir plus sur le rôle des ingénieurs de frontend dans les systèmes de conception, consultez Le rôle des ingénieurs de frontend dans les systèmes de conception, partie 1 et Partie 2.

Avec le contexte ci-dessus, Tailwind CSS adopte une approche unique et cohérente du style en se concentrant sur les principes de l’utilité. Dans cet article, nous explorerons CSS Tailwind, ses concepts principaux, ses fonctionnalités et comment il est appliqué dans des projets du monde réel.

Vent arrière

CSS du vent arrière est un cadre CSS moderne conçu pour rationaliser le processus de développement. Créé par Adam Wathan, Steve Schoger, Jonathan réinlingue et David HemphillTailwind a été publié pour la première fois en 2017 en tant que cadre d’utilité d’abord pour offrir aux développeurs une flexibilité et une vitesse dans le style de leurs applications. Depuis sa création, il est devenu l’un des cadres CSS les plus populaires de la communauté du développement Web.

Contrairement aux cadres CSS traditionnels comme AmorceTailwind se concentre sur le contrôle granulaire sur les styles, permettant aux développeurs de construire rapidement des conceptions personnalisées. Avec cela, le vent arrière priorise la vitesse et la personnalisation en éliminant le besoin d’écrire des CSS personnalisés pour la plupart des tâches. Que ce soit le prototypage d’une interface utilisateur ou le développement d’une application de qualité de production, Tailwind fournit les outils pour accélérer le développement tout en maintenant la cohérence.

À la base, le vent arrière CSS présente le concept de utilité d’abord classes. Ces classes à usage unique comme centre de texte, BG-Blue-500 ou PX-4 Décrivez les styles qu’ils appliquent. Cette approche élimine la couche d’abstraction des noms de classe personnalisés, ce qui rend les styles directement visibles dans notre HTML. Certains des principaux avantages de cette approche sont:

• Cohérence de conception – Les classes de services publics réduisent le risque de styles contradictoires.
• Efficacité – Pas besoin d’écrire CSS personnalisé pour le style de base.
• Conception réactive – La prise en charge intégrée des points d’arrêt simplifie la création de dispositions réactives.

Comprendre le vent arrière

Pour comprendre l’approche de l’utilitaire de Tailwind CSS, comparons un exemple simple de style d’un composant de carte en utilisant 1) CSS traditionnel, 2) un cadre basé sur des composants comme Bootstrap et 3) CSS de vent arrière.

Exemple CSS traditionnel

Dans le CSS traditionnel, les développeurs créent des noms de classe de composants personnalisés et définissent les styles dans un fichier CSS séparé. Voici un exemple:

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-content">This is some content inside the card.</p>
</div>

.card {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  max-width: 300px;
  margin: auto;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.card-content {
  color: #6c757d;
}

Dans l’exemple ci-dessus, nous avons défini un .card classe avec des propriétés comme la couleur d’arrière-plan, la bordure, le rembourrage et la largeur. Le .card-title et .card-content Les classes définissent respectivement un style supplémentaire pour le titre et le contenu. Cette approche nécessite de maintenir un fichier CSS séparé et de gérer les conventions de dénomination des cours.

Exemple de bootstrap

Un cadre CSS comme Amorce Simplifie le style en fournissant des classes prédéfinies pour les composants de l’interface utilisateur standard. Les développeurs peuvent appliquer ces classes directement aux éléments HTML sans écrire CSS personnalisé.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some content inside the card.</p>
  </div>
</div>

Dans cet exemple, Bootstrap’s Cours de carte, de cartes, de card-titrle et de texte de carte Style le composant de la carte. Bien que cette approche réduit le besoin de CSS personnalisés, il se limite aux classes prédéfinies du cadre, qui ne s’alignent pas toujours avec les exigences de conception spécifiques d’un projet.

Vent arrière

Tailwind adopte une approche de l’utilitaire, où chaque classe représente un style spécifique. Au lieu de s’appuyer sur des composants pré-style ou des CSS personnalisés, les styles sont appliqués directement dans le HTML.

<div class="bg-gray-100 border border-gray-300 rounded-lg p-4 max-w-sm">
  <h2 class="text-lg font-semibold mb-2">Card Title</h2>
  <p class="text-gray-600">This is some content inside the card.</p>
</div>

Voici une ventilation des cours d’utilité de vent arrière utilisé dans l’exemple ci-dessus:

Cette approche unique du style élimine le besoin d’un fichier CSS ou de dépendance séparé dans les classes de composants prédéfinis. Les styles sont explicites, lisibles et facilement modifiés dans notre HTML!

Choses à garder à l’esprit avec le vent arrière

Bien que Tailwind CSS offre de nombreux avantages, il est essentiel de comprendre ses défis et bizarreries potentiels. Une préoccupation commune est que l’approche de l’utilitaire de Tailwind peut faire apparaître des fichiers HTML verbeux et encombrés, en particulier lorsque les composants nécessitent de nombreuses classes de services publics. Cela peut avoir un impact sur la lisibilité, en particulier dans les bases de code plus grandes, sauf s’il existe une structure ou une documentation claire.

Imaginez un composant de carte plus complexe (que nous avons vu ci-dessus) qui comprend des éléments supplémentaires comme une image, des balises et un pied de page. Voici à quoi cela pourrait sembler entièrement stylé avec les cours d’utilité du vent arrière:

<div
  class="bg-white border border-gray-300 rounded-lg shadow-md max-w-md mx-auto p-6 space-y-4"
>
  <img
    src="https://via.placeholder.com/300x200"
    alt="Card image"
    class="rounded-md w-full h-48 object-cover"
  />
  <div class="space-y-2">
    <h2 class="text-xl font-bold text-gray-800">Card Title</h2>
    <p class="text-gray-600 leading-relaxed">
      This is a detailed description of the card.
    </p>
  </div>
  <div class="flex items-center space-x-2">
    <span
      class="bg-blue-100 text-blue-800 text-xs font-medium py-1 px-2 rounded-full"
      >Tag 1</span
    >
    <span
      class="bg-green-100 text-green-800 text-xs font-medium py-1 px-2 rounded-full"
      >Tag 2</span
    >
    <span
      class="bg-yellow-100 text-yellow-800 text-xs font-medium py-1 px-2 rounded-full"
      >Tag 3</span
    >
  </div>
  <div class="flex justify-between items-center pt-4 border-t border-gray-200">
    <button
      class="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 transition duration-300"
    >
      Learn More
    </button>
    <span class="text-sm text-gray-500">Last updated: 2 days ago</span>
  </div>
</div>

Bien que cet exemple utilise efficacement les cours d’utilité de Tailwind pour obtenir une conception détaillée, il démontre la verbosité potentielle de l’approche de l’utilitaire. Le HTML est lisible mais encombré, ce qui rend difficile d’identifier rapidement la structure du composant.

Tailwind offre aux développeurs la capacité d’utiliser un @appliquer Directive pour consolider les classes d’utilité en classes CSS réutilisables. En utilisant le @apply Directive Sur l’exemple de carte verbeux ci-dessus, nous pouvons simplifier le HTML en déplaçant les classes d’utilité répétées dans des classes CSS réutilisables. Cela améliore la lisibilité et rend le composant plus maintenable et évolutif dans des projets plus grands.

.card {
  @apply bg-white border border-gray-300 rounded-lg shadow-md max-w-md mx-auto p-6 space-y-4;
}

.card-image {
  @apply rounded-md w-full h-48 object-cover;
}

.card-title {
  @apply text-xl font-bold text-gray-800;
}

.card-description {
  @apply text-gray-600 leading-relaxed;
}

.card-tags {
  @apply flex items-center space-x-2;
}

.card-tag {
  @apply bg-blue-100 text-blue-800 text-xs font-medium py-1 px-2 rounded-full;
}

.card-footer {
  @apply flex justify-between items-center pt-4 border-t border-gray-200;
}

.card-button {
  @apply bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 transition duration-300;
}

.card-updated {
  @apply text-sm text-gray-500;
}

Le HTML devient beaucoup plus propre et plus facile à lire avec les classes de services publics abstraites en styles réutilisables.

<div class="card">
  <img
    src="https://via.placeholder.com/300x200"
    alt="Card image"
    class="card-image"
  />
  <div class="space-y-2">
    <h2 class="card-title">Card Title</h2>
    <p class="card-description">This is a detailed description of the card.</p>
  </div>
  <div class="card-tags">
    <span class="card-tag">Tag 1</span>
    <span class="card-tag">Tag 2</span>
    <span class="card-tag">Tag 3</span>
  </div>
  <div class="card-footer">
    <button class="card-button">Learn More</button>
    <span class="card-updated">Last updated: 2 days ago</span>
  </div>
</div>

En plus de gérer les définitions de classe verbeux, les nouveaux développeurs peuvent faire face à une courbe d’apprentissage lorsque vous travaillez avec le vent arrière pour la première fois. Le vaste ensemble de classes de services publics et les conventions de dénomination du cadre peut prendre le temps de mémoriser et de bien comprendre. Bien que Documentation de Tailwind est complet et utile, l’intégration pourrait initialement ralentir les développeurs peu familiers avec les frameworks des services publics.

Malgré cela, les avantages de Tailwind CSS l’emportent souvent sur ses défis, d’autant plus que les développeurs s’habituent à son flux de travail. La courbe d’apprentissage initiale cède la place à une productivité accrue, à la cohérence et à la flexibilité de conception, ce qui en fait un favori pour de nombreuses équipes travaillant sur des applications modernes évolutives.

Utilisation du vent arrière avec Kendoreact

Tailwind offre un contrôle granulaire sur le style grâce à l’application directe des cours de services publics, tandis qu’un cadre de composant aime les progrès Kendoreact est conçu pour accélérer le développement avec des composants prédéfinis et riches en fonctionnalités.

La combinaison de ces deux outils peut offrir une flexibilité significative, mais elle n’est pas toujours pratique car le chevauchement des fonctionnalités peut entraîner un effort redondant. Les cours de services publics de Tailwind fournissent des styles hautement personnalisés, qui peuvent entrer en conflit avec les conceptions préfugées de Kendoreact ou nécessiter des efforts supplémentaires pour maintenir la cohérence entre les deux approches.

Introduit à travers le UnstyledContext fournisseur, le kendoreact Mode non style Permet aux développeurs de supprimer les styles par défaut et d’appliquer des styles personnalisés en utilisant leurs propres classes CSS. Cette fonctionnalité est pratique lors de l’intégration de frameworks comme le vent arrière. En utilisant le mode non style, nous pouvons tirer parti des cours d’utilité de Tailwind à style Composants de Kendoreact Sans se soucier des conflits avec des styles ou des thèmes prédéfinis.

Par exemple, dans un composant de formulaire enveloppé avec UnstyledContextnous pouvons remplacer les classes de Kendoreact par défaut par des cours d’utilité de Tailwind:

import { UnstyledContext } from "@progress/kendo-react-common";

const formPreset = {
  uForm: {
    form: { main: "bg-gray-100 p-6 rounded-lg" },
    field: { main: "mb-4" },
  },
};

<UnstyledContext.Provider value={formPreset}>
  <Form>{}</Form>
</UnstyledContext.Provider>;

Ce sujet présente une discussion intéressante sur le moment d’utiliser des frameworks de l’utilité d’abord par rapport aux bibliothèques de composants d’interface utilisateur – ou comment combiner les deux efficacement. Dans un prochain article, nous allons explorer cela davantage pour vous aider à décider quand ces intégrations ont un sens et comment les aborder pour une efficacité maximale. Restez à l’écoute!

Conclure

L’approche utilitaire de Tailwind CSS simplifie le style en fournissant une solution cohérente, flexible et évolutive pour le développement Web moderne. Bien que sa courbe de verbosité et d’apprentissage puisse présenter des défis, les avantages d’une productivité accrue, de la cohérence de la conception et de la personnalisation l’emportent souvent sur ces préoccupations.

Si vous n’avez jamais essayé le vent arrière auparavant, consultez leur installation Guide sur les étapes sur la façon de commencer.