Configuration de Tailwind CSS

Le fichier de configuration principal de Tailwind CSS esttailwind.config.js。

tailwind.config.js est le fichier de configuration de Tailwind CSS, utilisé pour personnaliser la configuration par défaut de Tailwind.

En modifiant le fichier tailwind.config.js, les développeurs peuvent personnaliser des éléments du système de conception tels que les couleurs, les espacements, les polices et les points de rupture afin de répondre aux exigences spécifiques d'un projet.

Créer le fichier de configuration

Vous pouvez rapidement générer un fichier tailwind.config.js de base à l'aide de l'outil CLI de Tailwind CSS.

Exécutez la commande suivante dans le répertoire racine du projet :

npx tailwindcss init

Cela créera un fichier tailwind.config.js contenant la configuration de base.

Structure de base

Voici la structure d'un fichier tailwind.config.js typique :

Le code ci-dessus indique à Tailwind CSS de scanner tous les fichiers .html, .js et .vue dans le répertoire src.

Principaux éléments de configuration

1. Configurer le chemin du modèle : content

content: [
  "./index.html", // 单文件路径
  "./src/**/*.{html,js,ts,jsx,tsx}", // 包含多个文件类型的路径
],

Cela indique à Tailwind CSS de scanner tous les fichiers .html, .js, .ts, .jsx et .tsx dans le répertoire src.

Le champ content sert à spécifier les chemins des fichiers modèles pour Tailwind. Tailwind scanne ces fichiers pour générer les styles nécessaires, ce qui réduit la taille du fichier CSS généré en ne générant que les styles utilisés dans les fichiers modèles, empêchant les styles inutilisés d'être compilés dans la sortie finale.

2. Personnaliser le thème : theme

Dans la section theme, vous pouvez définir des couleurs, des polices, des espacements, des tailles de bordure, et plus encore.

Par exemple, étendez les couleurs par défaut ou ajoutez de nouvelles couleurs :

theme: {
  extend: {
    colors: {
      cyan: '#9CDBFF',
    }
  }
}

Cela ajoutera une nouvelle couleur nommée cyan, et vous pourrez utiliser des noms de classe comme bg-cyan dans votre projet.

Définissez des couleurs via theme.colors et référencez-les dans les styles.

theme: {
  extend: {
    colors: {
      brand: {
        light: '#93C5FD',
        DEFAULT: '#3B82F6',
        dark: '#1E40AF',
      },
    },
  },
}

Activez la prise en charge du mode sombre de Tailwind via darkMode.

module.exports = {
  darkMode: 'class', // ou  'media'
  theme: {
    extend: {
      colors: {
        background: {
          light: '#FFFFFF',
          dark: '#000000',
        },
      },
    },
  },
}

3. Configurer les variantes : variants

L'option variants vous permet de définir quels états (tels que hover, focus, etc.) doivent être inclus dans le CSS final.

Vous pouvez étendre ou remplacer les variants par défaut :

variants: {
  extend: {
    borderColor: ['focus-visible'],
    opacity: ['disabled'],
  }
}

4. Utiliser les plugins : plugins

L'option plugins vous permet d'ajouter des classes utilitaires personnalisées.

Ces plugins peuvent être officiellement fournis par Tailwind CSS ou créés par la communauté, avec le format suivant :

plugins: [
  require('some-tailwindcss-plugin')
]

Exemple d'utilisation d'un plugin :

Importer les plugins de la communauté :

Configuration de Tailwind CSS

Par défaut, Tailwind recherche le fichier tailwind.config.js dans le répertoire racine du projet, où vous pouvez définir les informations de configuration dont vous avez besoin :

Le tableau suivant répertorie les options de configuration du fichier tailwind.config.js et leurs descriptions d'utilisation :

Avec tailwind.config.js, vous pouvez facilement personnaliser les fonctionnalités et les styles de Tailwind CSS pour répondre à divers besoins de conception. Une utilisation raisonnable de fonctionnalités telles que extend, plugins et la configuration du thème peut grandement améliorer l'efficacité de développement du projet et la flexibilité des styles.