So verwenden Sie die „Safelist' von Tailwinds zum Umgang mit dynamischen Klassen

Tailwind CSS ist ein beliebtes Utility-First-CSS-Framework, mit dem Entwickler schnell und effizient benutzerdefinierte Designs erstellen können. Standardmäßig generiert Tailwind CSS eine Vielzahl von Utility-Klassen, was zu großen Dateigrößen führen kann. Um dieses Problem zu beheben, verfügt Tailwind CSS über eine integrierte Funktion namens PurgeCSS, die nicht verwendete Stile aus dem Produktions-Build entfernt und so die endgültige CSS-Datei kleiner und leistungsfähiger macht. Allerdings kann diese automatische Entfernung manchmal zu Problemen führen, wenn bestimmte Stile in Ihrer Anwendung dynamisch oder bedingt verwendet werden. In diesem Artikel befassen wir uns eingehend mit der Safelist-Funktion in Tailwind CSS, erfahren, wie man bestimmte Stile auf die Whitelist setzt und erkunden verschiedene Szenarien, in denen die Verwendung einer Safelist hilfreich sein kann.

1. PurgeCSS in Tailwind CSS verstehen

PurgeCSS ist ein leistungsstarkes Tool, das Ihre Projektdateien nach verwendeten Klassennamen durchsucht und die nicht verwendeten aus der endgültigen CSS-Datei entfernt. Dadurch wird die Größe des generierten CSS erheblich reduziert, wodurch Ihre Anwendung schneller geladen wird.

Standardmäßig umfasst Tailwind CSS die PurgeCSS-Konfiguration, die Ihre HTML-, JavaScript- und Vue-Dateien nach Klassennamen durchsucht. Sie können ganz einfach anpassen, welche Dateien im Inhaltsarray der Konfigurationsdatei aufgenommen werden.

In manchen Situationen müssen Sie möglicherweise verhindern, dass bestimmte Stile entfernt werden, auch wenn sie in Ihren Dateien nicht erkannt werden. Hier kommt die Safelist-Funktion ins Spiel.

2. Einführung von Safelist

Safelist ist eine Funktion in Tailwind CSS, mit der Sie bestimmte Stile auf die Whitelist setzen können, damit sie während des Löschvorgangs nicht entfernt werden. Dies ist besonders nützlich, wenn Sie dynamische Klassennamen über JavaScript generieren oder basierend auf Benutzerinteraktionen anwenden lassen. Ein weiterer sehr häufiger Anwendungsfall für Safelist ist, wenn Farben oder Stile von einem CMS oder Backend-Framework gesteuert werden. Ein solches Beispiel könnte ein System sein, das es einem Website-Administrator ermöglicht, die Farbe einer Kategorie in einem CMS zu bearbeiten, was wiederum die Farbe der Navigationselemente für diese Kategorie ändert. Tailwind sieht den tatsächlichen Klassennamen nicht, da die Datei serverseitigen Code enthält, der die Farbe ausgibt.

Durch das Hinzufügen dieser Klassennamen zur Safelist stellen Sie sicher, dass sie immer in Ihrer endgültigen CSS-Datei enthalten sind, unabhängig davon, ob PurgeCSS sie in Ihren Projektdateien finden kann oder nicht.

3. Konfigurieren der Safelist in tailwind.config.js

Um die Safelist in Ihrem Tailwind-CSS-Projekt zu konfigurieren, müssen Sie die Datei tailwind.config.js ändern. Die Safelist ist ein Array von Klassennamen, die Sie in Ihrer endgültigen CSS-Datei behalten möchten, auch wenn sie nicht in Ihren Projektdateien gefunden werden. Hier ist ein Beispiel für das Hinzufügen von Klassennamen zur Safelist:

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

In diesem Beispiel werden die Klassen bg-red-500, text-white und hover:bg-red-700 zur Safelist hinzugefügt. Diese Klassen werden immer in Ihrer endgültigen CSS-Datei enthalten sein, auch wenn PurgeCSS sie nicht in Ihren Projektdateien findet.

4. Erweiterte Konfigurationen

Wenn Sie viele Klassen innerhalb der Safelist verwalten müssen, vielleicht aufgrund mehrerer Farben und der Notwendigkeit, Varianten/Modifikatoren wie :hover, :focus, :active und dark zu unterstützen: dann kann es schnell sehr schwierig werden, diese darin zu verwalten Safelist. Die Liste wird sehr schnell riesig.

Hier kommen Muster ins Spiel. Tailwind unterstützt Regex innerhalb der Safelist:

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

Mit diesen 2 Einträgen fügen wir effektiv 12 Klassen hinzu. from-{color}-200 und to-{color}-100, wobei {color} alle Farben in der Liste sind. Dies erleichtert die Verwaltung der Listen erheblich. Denken Sie daran, dass es sich bei tailwind.config.js nur um eine JavaScript-Datei handelt, sodass Sie Variablen oben in der Datei verwalten können, wenn Sie Listen mit Farben verwalten, die sich häufig wiederholen.

Es ist auch möglich, Varianten für alles in der Liste zu definieren, ohne sie explizit in Regex auflisten zu müssen:

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. Beispiele und Anwendungsfälle für Safelists

Es gibt mehrere Szenarien, in denen die Verwendung der Safelist-Funktion hilfreich sein kann:

Dynamische Klassennamen: Wenn Sie Klassennamen dynamisch basierend auf Daten oder Benutzereingaben generieren, erkennt PurgeCSS diese Klassen möglicherweise nicht und entfernt sie nicht aus der endgültigen CSS-Datei. Durch das Hinzufügen dieser dynamischen Klassen zur Safelist können Sie sicherstellen, dass sie immer in Ihrer Anwendung verfügbar sind.

// 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'

In diesem Beispiel generiert die Variable „alertClass“ einen Klassennamen basierend auf Benutzereingaben oder Daten von einer API. Da PurgeCSS diesen dynamischen Klassennamen nicht erkennen kann, sollten Sie ihn zur Safelist in Ihrer tailwind.config.js-Datei hinzufügen.

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.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die „Safelist' von Tailwinds zum Umgang mit dynamischen Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!