Tailwind CSS a pris d'assaut le monde du développement Web ?️, mais les idées fausses sur sa nature persistent. Lors d'une récente discussion sur la planification d'un système de conception, j'ai failli laisser tomber mon thé ☕ (je ne bois pas de café, désolé) lorsqu'un collègue a comparé avec désinvolture Tailwind CSS à Bootstrap et Materialise ?. Cette révélation choquante, c’était comme découvrir que mon chat se prend pour un chien ! ??

Alors, prends ton pop-corn ? alors que je remets les pendules à l’heure et dévoile la véritable identité de Tailwind CSS !

Petite introduction

Dans cet article, nous approfondirons ?‍♂️ ce qu'est réellement Tailwind CSS, en explorant son approche unique du style et pourquoi il se démarque des frameworks CSS traditionnels. À la fin, vous comprendrez pourquoi comparer Tailwind CSS à Bootstrap ou à d'autres frameworks basés sur des composants, c'est comme comparer des pommes avec des oranges ??

Ce que Tailwind CSS n'est pas ❌

Avant d'explorer la véritable nature de Tailwind, dissipons quelques mythes :

• Pas une bibliothèque de composants : contrairement à Bootstrap ou Materialise, Tailwind CSS ne fournit pas de composants prédéfinis prêts à l'emploi ?
• Pas d'avis sur le design : Il n'impose pas de style visuel spécifique à vos projets ?
• Pas seulement un autre framework CSS : bien qu'il s'agisse techniquement d'un framework CSS, son approche axée sur l'utilitaire le distingue des frameworks traditionnels ?

Et voici quelques idées fausses courantes :

•  ? "Tailwind CSS est comme les styles en ligne" : Non, ce n'est pas le cas. Contrairement aux styles en ligne, Tailwind vous permet d'utiliser des fonctionnalités avancées telles que les pseudo-classes, les requêtes multimédias et les animations. Il fournit une approche axée sur l'utilitaire qui entraîne moins de classes CSS par rapport au style en ligne
•  ? "Vous n'avez pas besoin de connaître CSS pour utiliser Tailwind" : C'est false. Une solide compréhension du CSS est cruciale pour utiliser efficacement Tailwind CSS4. Bien que cela simplifie de nombreux aspects du style, connaître les principes fondamentaux du CSS aide à comprendre le fonctionnement des classes utilitaires et comment les personnaliser en cas de besoin
•  ? "Tailwind CSS ne peut pas être personnalisé" : cela ne pourrait pas être plus éloigné de la vérité. En fait, il est conçu pour être hautement extensible et personnalisable

Maintenant que nous avons dissipé certaines idées fausses, explorons ce qui rend Tailwind CSS vraiment unique et pourquoi il révolutionne la façon dont les développeurs abordent le style Web.

Un framework CSS axé sur les utilitaires

À la base, Tailwind CSS est un framework CSS privilégiant l'utilitaire. Cela signifie qu'il fournit un ensemble de classes utilitaires de bas niveau que vous pouvez utiliser pour créer des conceptions personnalisées directement dans votre code HTML. Au lieu d'écrire du CSS personnalisé pour chaque élément, vous appliquez des classes prédéfinies qui gèrent des propriétés de style spécifiques. C'est comme avoir un couteau suisse ? pour votre CSS !

Par exemple, au lieu d'écrire :

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

Vous utiliseriez les classes Tailwind dans votre code HTML :

Click me

Un système de conception déguisé

Bien que Tailwind ne fournisse pas de composants prédéfinis, il propose un système de conception complet. Il est livré avec un ensemble soigneusement conçu de valeurs par défaut pour les couleurs, l'espacement, la typographie, etc.. Ces valeurs par défaut sont personnalisables, vous permettant d'adapter Tailwind aux besoins de conception spécifiques de votre projet.

Jetez un œil à cette configuration personnalisée :

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

Pourquoi Tailwind CSS se démarque

Flexibilité et personnalisation

Contrairement à Bootstrap ou Materialise, qui fournissent un ensemble de composants avisés, Tailwind vous donne les éléments de base pour créer vos propres conceptions uniques. Cette flexibilité permet une plus grande liberté de création et permet d'éviter le « look Bootstrap » dans lequel tombent de nombreux sites Web.

Avantages en termes de performances

Son approche axée sur l'utilitaire peut conduire à des tailles de fichiers CSS plus petites, en particulier lorsqu'elle est combinée avec sa fonction de purge intégrée. Cette fonctionnalité supprime les styles inutilisés en production, ce qui donne lieu à une feuille de style plus simple et plus performante. Votre site Web aura l’impression d’être sous stéroïdes ! ?

Un optimiseur d'expérience pour les développeurs

Il améliore considérablement l'expérience des développeurs en :

• Réduire le changement de contexte : vous pouvez styliser les éléments sans quitter votre code HTML. Plus besoin de jongler avec plusieurs fichiers ! ?‍♂️
• Promouvoir la cohérence : les classes prédéfinies encouragent un espacement, des couleurs et d'autres éléments de conception cohérents dans l'ensemble de votre projet. Votre design sera aussi harmonieux qu'un orchestre bien accordé ?
• Accélération du développement : avec des classes utilitaires à portée de main, vous pouvez rapidement créer des prototypes et itérer sur des conceptions. Vous aurez l'impression d'avoir des super pouvoirs !⚡ Et avec l'extension Tailwindcss Intellisense vscode, vous pouvez obtenir l'auto-complétion et le peluchage pour ses classes et les classes personnalisées ajoutées

Et c'est fini ?

Tailwind CSS n'est pas simplement un autre framework CSS. En fournissant un ensemble de classes utilitaires de bas niveau, il permet aux développeurs de créer des conceptions uniques, efficaces et maintenables sans les contraintes des frameworks CSS traditionnels.

Ainsi, la prochaine fois que quelqu'un comparera Tailwind à Bootstrap, vous serez en mesure d'expliquer pourquoi cette comparaison manque la cible - et pourquoi Tailwind pourrait bien changer la donne dont votre projet a besoin. Bon codage ! ???‍?