Comment utiliser la « liste sécurisée » de Tailwinds pour gérer les classes dynamiques

Tailwind CSS est un framework CSS utilitaire populaire qui permet aux développeurs de créer des conceptions personnalisées rapidement et efficacement. Par défaut, Tailwind CSS génère un large éventail de classes utilitaires, ce qui peut conduire à des fichiers de grande taille. Pour résoudre ce problème, Tailwind CSS est livré avec une fonctionnalité intégrée appelée PurgeCSS qui supprime les styles inutilisés de la version de production, rendant le fichier CSS final plus petit et plus performant. Cependant, cette suppression automatique peut parfois poser des problèmes lorsque certains styles sont utilisés de manière dynamique ou conditionnelle dans votre application. Dans cet article, nous approfondirons la fonctionnalité de liste sûre dans Tailwind CSS, apprendrons comment mettre en liste blanche des styles spécifiques et explorerons divers scénarios dans lesquels l'utilisation de la liste sûre peut être utile.

1. Comprendre PurgeCSS dans Tailwind CSS

PurgeCSS est un outil puissant qui analyse vos fichiers de projet à la recherche de tous les noms de classe utilisés et supprime ceux inutilisés du fichier CSS final. Cela réduit considérablement la taille du CSS généré, ce qui accélère le chargement de votre application.

Par défaut, Tailwind CSS inclut la configuration PurgeCSS qui analyse vos fichiers HTML, JavaScript et Vue à la recherche de tous les noms de classe. Vous pouvez facilement modifier les fichiers récupérés dans le tableau de contenu du fichier de configuration.

Dans certaines situations, vous devrez peut-être empêcher la suppression de styles spécifiques, même s'ils ne sont pas détectés dans vos fichiers. C'est là que la fonctionnalité de liste sûre entre en jeu.

2. Présentation de Safelist

Safelist est une fonctionnalité de Tailwind CSS qui vous permet de mettre certains styles sur liste blanche afin qu'ils ne soient pas supprimés pendant le processus de purge. Ceci est particulièrement utile lorsque vous avez des noms de classe dynamiques générés via JavaScript ou appliqués en fonction de l'interaction de l'utilisateur. Un autre cas d'utilisation très courant de la liste sûre est celui où les couleurs ou les styles sont pilotés à partir d'un CMS ou d'un framework backend. Un tel exemple pourrait être un système qui permet à un administrateur de site Web de modifier la couleur d'une catégorie dans un CMS, ce qui modifie à son tour la couleur des éléments de navigation pour cette catégorie. Tailwind ne verra pas le nom réel de la classe car le fichier contiendra du code côté serveur qui génère la couleur.

En ajoutant ces noms de classes à la liste sûre, vous vous assurez qu'ils seront toujours inclus dans votre fichier CSS final, que PurgeCSS puisse ou non les trouver dans vos fichiers de projet.

3. Configuration de la liste sécurisée dans tailwind.config.js

Pour configurer la liste fiable dans votre projet CSS Tailwind, vous devez modifier le fichier tailwind.config.js. La liste sécurisée est un tableau de noms de classes que vous souhaitez conserver dans votre fichier CSS final, même s'ils ne figurent pas dans vos fichiers de projet. Voici un exemple de la façon d'ajouter des noms de classe à la liste sûre :

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

Dans cet exemple, les classes bg-red-500, text-white et hover:bg-red-700 sont ajoutées à la liste sûre. Ces classes seront toujours incluses dans votre fichier CSS final, même si PurgeCSS ne les trouve pas dans vos fichiers de projet.

4. Configurations plus avancées

Si vous avez beaucoup de classes à gérer dans la liste sûre, peut-être en raison de plusieurs couleurs et de la nécessité de prendre en charge des variantes/modificateurs tels que :hover, :focus, :active et dark : alors cela peut rapidement devenir très difficile à gérer ceux-ci dans la liste sûre. La liste deviendra très vite énorme.

C'est là que les modèles entrent en jeu. Tailwind prend en charge les expressions régulières dans la liste sûre :

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

Avec ces 2 entrées, nous ajoutons effectivement 12 classes. from-{color}-200 et to-{color}-100, où {color} représente toutes les couleurs de la liste. Cela facilite grandement la gestion des listes. N'oubliez pas que tailwind.config.js n'est qu'un fichier JavaScript, vous pouvez donc gérer les variables en haut du fichier si vous gérez des listes de couleurs très répétées.

Il est également possible de définir des variantes pour tout ce qui se trouve dans la liste sans avoir besoin de les lister explicitement dans l'expression régulière :

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

5. Exemples de listes sûres et cas d'utilisation

Il existe plusieurs scénarios dans lesquels l'utilisation de la fonctionnalité de liste fiable peut être utile :

Noms de classe dynamiques : si vous générez des noms de classe de manière dynamique en fonction de certaines données ou entrées de l'utilisateur, PurgeCSS peut ne pas détecter ces classes et les supprimer du fichier CSS final. En ajoutant ces classes dynamiques à la liste sécurisée, vous pouvez vous assurer qu'elles sont toujours disponibles dans votre application.

// Example of a dynamic class name based on user input
const userInput = 'success'; // This value might come from an API or user input
const alertClass = `alert-${userInput}`;

// Generated class name: 'alert-success'

Dans cet exemple, la variable alertClass génère un nom de classe basé sur les entrées de l'utilisateur ou les données d'une API. Étant donné que PurgeCSS ne peut pas détecter ce nom de classe dynamique, vous devez l'ajouter à la liste fiable dans votre fichier tailwind.config.js.

Conditional styles: If you have styles that only apply under specific conditions, such as a dark mode or a mobile view, you can use the safelist to ensure those styles are always included in your final CSS file.

// Example of a conditional style based on a media query
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

In this example, the hidden-mobile class is only applied when the viewport width is less than 768 pixels. Since this class might not be detected by PurgeCSS, you should add it to the safelist in your tailwind.config.js file.

6. Best Practices for Safelisting

When using the safelist feature in Tailwind CSS, keep the following best practices in mind:

• Only add classes to the safelist that are truly necessary. Adding too many classes can bloat your final CSS file and negate the benefits of PurgeCSS.
• If you have many dynamic class names or a complex application, consider using a function or regular expression to generate the safelist array. This can help keep your configuration cleaner and more maintainable.
• Test your production build to ensure that all required styles are included. This can help you catch any issues early on and avoid surprises when deploying your application.

Summary

The safelist feature in Tailwind CSS provides a powerful way to whitelist specific styles and ensure they are included in your final CSS file, even if they are not detected by PurgeCSS. By understanding how to configure the safelist and use it effectively in various scenarios, you can make your Tailwind CSS projects more robust and maintainable. Remember to follow best practices when using the safelist to ensure your final CSS file remains lean and performant.

Feel free to look over the Tailwind Docs on Safelist usage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!