Conseils pratiques et bonnes pratiques Tailwind CSS

Jeton de conception personnalisée

Définissez des jetons de conception spécifiques au projet dans tailwind.config.mjs :

theme: {
  extend: {
    colors: {
      primary: { /* 色阶 */ },
      surface: { /* 色阶 */ },
    },
  },
},

Techniques couramment utilisées

1. Utilisez @apply pour extraire les styles publics

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-500 text-white rounded-lg
           hover:bg-primary-600 transition-colors duration-200;
  }
}

2. Conception réactive

Les points d’arrêt de Tailwind sont axés sur le mobile :

sm: 640px
md: 768px
lg: 1024px
xl: 1280px

3. Mode sombre

Utilisez le préfixe « dark : » pour implémenter facilement le mode sombre :

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">自适应内容</p>
</div>

Optimisation des performances

Assurez-vous que le « contenu » est correctement configuré pour éviter de générer du CSS inutilisé
Générer des styles à la demande en utilisant le mode JIT
Tree-shake automatique pendant la construction

Résumer

Tailwind CSS rend le développement de styles plus efficace. En utilisant rationnellement des configurations personnalisées et des classes d’outils, vous pouvez rapidement créer une interface cohérente et esthétique.