Tailwind CSS propose un fichier de configuration hautement personnalisable permettant de modifier le thème par défaut afin de mieux répondre aux exigences de conception de votre projet. Ce chapitre aborde la personnalisation des palettes de couleurs, la définition de polices personnalisées et l'ajustement de l'échelle des espacements.

Remarque

Pour personnaliser les styles par défaut de Tailwind CSS, il est nécessaire de mettre à jour le fichier tailwind.config.js.

Personnalisation des palettes de couleurs

Il est possible d'ajouter de nouvelles couleurs, d'étendre celles existantes ou de remplacer complètement la palette de couleurs par défaut.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
        customGreen: '#17BF63',
        customRed: '#E0245E',
      },
    },
  },
};

Ensuite, après avoir ajouté une palette de couleurs personnalisée, nous étions prêts à l'utiliser dans le HTML.

<div class="bg-customBlue text-white p-4">Custom Blue Background</div>
<div class="bg-customGreen text-white p-4">Custom Green Background</div>
<div class="bg-customRed text-white p-4">Custom Red Background</div>

Définition de polices personnalisées

Nous pouvons également personnaliser les polices dans Tailwind CSS en ajoutant de nouvelles familles de polices dans le fichier de configuration.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Courier New', 'monospace'],
      },
    },
  },
};

Ensuite, nous passons au HTML.

<div class="font-sans text-lg">Sans-serif Font</div>
<div class="font-serif text-lg">Serif Font</div>
<div class="font-mono text-lg">Monospace Font</div>

Personnalisation de l’échelle d’espacement

Tailwind CSS propose une échelle d’espacement par défaut, mais il est possible de la personnaliser pour répondre aux besoins du design en ajoutant ou en modifiant les valeurs d’espacement dans le fichier de configuration.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

Utilisation en HTML.

<div class="p-72 bg-gray-200">Padding 18rem</div>
<div class="p-84 bg-gray-300">Padding 21rem</div>
<div class="p-96 bg-gray-400">Padding 24rem</div>

Remarque

Le principe devrait être compris. Toute classe utilitaire peut être étendue avec des fonctionnalités dans le fichier de configuration. La documentation sur ce sujet est disponible ici.