Personnalisation de Tailwind CSS – Extension du framework-tutoriel CSS-php.cn

Personnalisation de Tailwind CSS – Extension du framework

Linda Hamilton

Libérer： 2024-10-05 06:11:02

original

874 Les gens l'ont consulté

Customizing Tailwind CSS – Extending the Framework

Dans cet article, nous allons plonger dans la personnalisation de Tailwind CSS en fonction des besoins de votre projet. Tailwind est flexible et peut être étendu au-delà de la configuration par défaut, vous permettant de créer un système de conception entièrement personnalisé.

1. Pourquoi personnaliser Tailwind ?

Par défaut, Tailwind propose un large éventail de classes utilitaires, mais vous souhaiterez parfois aller au-delà de ce qui est disponible. Vous pouvez ajouter vos propres couleurs, polices, valeurs d'espacement et même des points d'arrêt, faisant de Tailwind un ajustement parfait à votre système de conception.

Exemple :

Vous souhaiterez peut-être utiliser une couleur spécifique à la marque ou une police personnalisée dans votre projet. Tailwind vous permet de configurer facilement ces paramètres dans son fichier de configuration (tailwind.config.js).

2. Configuration du fichier de configuration Tailwind

Une fois que vous avez installé Tailwind via npm, vous pouvez créer un fichier de configuration en exécutant :


npx tailwindcss init

Copier après la connexion

Cela générera un fichier tailwind.config.js dans lequel vous pourrez personnaliser les paramètres par défaut de Tailwind.

Exemple :


module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#5A67D8',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans-serif'],
      },
    },
  },
}

Copier après la connexion

Dans cet exemple :

Nous avons ajouté une couleur personnalisée (marque) et une famille de polices personnalisée (personnalisée).

3. Ajout de couleurs et d'espacements personnalisés

Tailwind vous permet de définir des couleurs et des valeurs d'espacement personnalisées pour répondre aux besoins de conception de votre projet. Vous pouvez étendre la palette par défaut ou la remplacer entièrement.

Exemple – Couleurs personnalisées :


module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#A78BFA',
      },
    },
  },
}

Copier après la connexion

Vous pouvez désormais utiliser ces couleurs dans votre HTML :


<div class="bg-primary text-white">Custom Background</div>

Copier après la connexion

Exemple – Espacement personnalisé :


module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

Copier après la connexion

Ces nouvelles valeurs d'espacement peuvent désormais être utilisées comme ceci :


<div class="mt-72">Extra Margin</div>

Copier après la connexion

4. Personnalisation des points d'arrêt

Si les points d'arrêt réactifs par défaut ne correspondent pas à vos exigences de conception, vous pouvez modifier ou ajouter de nouveaux points d'arrêt.

Exemple :


module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Adding a custom breakpoint
    },
  },
}

Copier après la connexion

Vous pouvez désormais appliquer des styles au nouveau point d'arrêt 3xl.

5. Purger les CSS inutilisés

Tailwind peut générer beaucoup de CSS, mais vous pouvez réduire considérablement la taille de votre CSS de production en purger les styles inutilisés. Tailwind dispose d'une option de purge intégrée qui supprime les classes inutilisées de votre fichier CSS final.

Configuration de la purge :


module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

Copier après la connexion

Cela garantit que seules les classes CSS utilisées dans vos fichiers HTML et JavaScript sont incluses dans la version de production, ce qui rend votre fichier CSS final beaucoup plus petit.

Conclusion

La personnalisation de Tailwind CSS vous permet d'adapter le framework aux besoins exacts de votre projet. Qu'il s'agisse d'ajouter des couleurs personnalisées, des polices, des espacements ou même des points d'arrêt, Tailwind vous offre la flexibilité nécessaire pour créer un système de conception unique tout en tirant parti de la puissance des classes utilitaires.