Directives et fonctions avec Tailwind CSS

Tailwind CSS fournit des fonctions et directives très utiles qui aident les développeurs à mieux gérer les styles et à optimiser le code.

Grâce aux fonctions et directives, Tailwind vous offre plus de contrôle et de flexibilité, en particulier pour personnaliser les styles, gérer la conception responsive et étendre les fonctionnalités.

Tailwind CSS fournit une variété de directives et de fonctions pour aider les développeurs à gérer et personnaliser les styles :

• Utilisation@tailwindImporte les styles de base, les styles de composants et les classes utilitaires de Tailwind.
• @applyVous permet de combiner plusieurs classes utilitaires en classes personnalisées, en évitant la duplication de styles.
• @layerVous permet d'organiser et de définir différentes couches de styles dans du CSS personnalisé.
• Des fonctions intégrées pour les couleurs, l'espacement, l'opacité, le rayon des bordures, etc., vous permettent de calculer et de générer des styles dynamiquement.

Directive @tailwind

@tailwindLa directive est utilisée pour importer les trois couches principales de Tailwind dans les fichiers CSS :base, componentsetutilities。

• @tailwind base: importe les styles de base de Tailwind (tels que les styles de réinitialisation du navigateur).
• @tailwind components: importe les styles de composants, utilisés pour définir les styles de base des boutons, des cartes, des formulaires, etc.
• @tailwind utilities: importe les classes utilitaires, la partie essentielle de la bibliothèque de styles de Tailwind, fournissant des classes utilitaires de bas niveau pour la mise en page, les couleurs, les espacements, les bordures, etc.

Ces couches définissent tous les styles de base, les styles de composants et les classes utilitaires dont vous avez besoin lorsque vous utilisez Tailwind.

/* 自定义样式中引入 Tailwind 样式 */
@tailwind base;          /* 引入基础样式 */
@tailwind components;    /* 引入组件样式 */
@tailwind utilities;     /* 引入工具类 */

Directive @apply

@applyLa directive est utilisée pour appliquer les classes utilitaires de Tailwind au sein de classes CSS personnalisées. Elle vous permet de combiner des styles courants tout en conservant la maintenabilité et la flexibilité de Tailwind.

.my-class {
  @apply <utility-class1> <utility-class2> ... ;
}

En utilisant@apply, vous pouvez combiner des classes courantes dans une classe CSS personnalisée, ce qui permet de les réutiliser.

Directive @layer

@layerLa directive est utilisée pour définir des couches dans Tailwind, principalement pour organiser les styles d'extension personnalisés. Elle est souvent utilisée pour créer des composants personnalisés, des classes utilitaires, etc., afin de garder la structure des fichiers CSS claire.

• @layer components: définit des composants personnalisés.
• @layer utilities: définit des classes utilitaires personnalisées.
• @layer base: définit les styles de base.

Syntaxe :

@layer components {
  /* 在这里定义自定义的组件类 */
}

@layer utilities {
  /* 在这里定义自定义的工具类 */
}

@import Directive

Dans Tailwind CSS, vous pouvez également utiliser@importdirective pour importer d'autres fichiers CSS. Bien que Tailwind lui-même ne recommande pas l'utilisation fréquente de@import, il prend toujours en charge cette fonctionnalité.

Syntaxe :

@import '<path-to-file>';

Fonctions Tailwind CSS

Les fonctions dans Tailwind CSS sont principalement utilisées pour générer dynamiquement des styles, comme les calculs pour les couleurs, l'opacité, les dimensions, etc. Elles vous permettent d'effectuer davantage de calculs et de contrôle dans les fichiers de configuration ou les styles personnalisés.

Fonctions de couleur

Tailwind fournit quelques fonctions de couleur intégrées qui peuvent être utilisées pour générer différentes variantes d'une couleur (comme l'assombrissement, l'éclaircissement, etc.).

• darken(): assombrit une couleur.
• lighten(): éclaircit une couleur.
• opacity(): définit l'opacité d'une couleur.

Fonctions d'espacement

Tailwind fournitrem, px, emdes fonctions pour des unités telles que ... Vous pouvez les utiliser pour calculer des tailles dynamiques et des valeurs d'espacement.

Fonctions d'arrondi des bordures

Dans Tailwind CSS, vous pouvez également utiliser des fonctions pour définir le rayon des bordures. Par exemple, utilisezradius()pour calculer différents rayons de bordure.

Fonctions personnalisées

Tailwind CSS vous permet de définir et d'utiliser des fonctions personnalisées. Vous pouveztailwind.config.jsusethemela fonction pour accéder au système de design de Tailwind et le manipuler.

Fonctions intégrées courantes de Tailwind CSS

Tailwind CSS dispose de nombreuses fonctions intégrées pour vous aider dans les calculs lors de la création de styles personnalisés.

Voici quelques fonctions intégrées courantes :

Exemple avec rem() :

/* 将数字 16 转换为 rem 单位 */
.my-class {
  font-size: rem(16);  /* 结果为 1rem */
}

Exemple avec em() :

/* 将数字 16 转换为 em 单位 */
.my-class {
  padding: em(16);  /* 结果为 1em */
}

Exemple avec px() :

/* 使用 px() 函数生成固定像素 */
.my-class {
  margin: px(16);  /* 结果为 16px */
}

Exemple avec calc() :

/* 使用 calc() 函数动态计算 */
.my-class {
  width: calc(100% - px(20));  /* 结果为 100% - 20px */
}

Exemple avec theme() :

/* 使用 theme() 函数访问 Tailwind 主题配置 */
.my-class {
  background-color: theme('colors.green.500');  /* 结果为 #1064B9 */
}

exemple de clamp() :

/* 使用 clamp() 设置字体大小，基于视口宽度变化 */
.my-class {
  font-size: clamp(1rem, 5vw, 3rem);  /* 最小 1rem，最大 3rem，视口宽度介于其间时动态变化 */
}

Utilisation des opérateurs conditionnels et des combinaisons de fonctions

Dans Tailwind, de nombreuses fonctionnalités peuvent être utilisées avec des opérateurs conditionnels. Combinées au responsive design et aux classes d'état (telles quehover:, focus:), vous pouvez appliquer dynamiquement ces styles.

Par exemple, vous pouvez combiner@applyavec le responsive design pour obtenir certaines fonctionnalités :