In diesem Artikel wird die Methode zur Verwendung der statischen Dienstprogramme in Tailwind CSS erläutert.
Wie verwende ich statische Dienstprogramme in Tailwind?
Um die statischen Dienstprogramme in Tailwind zu verwenden, fügen Sie „ addUtilities() ”-Funktion in der Datei „tailwind.config.js“ und konfigurieren Sie die gewünschten statischen Dienstprogramme. Verwenden Sie dann statische Dienstprogramme im HTML-Programm und stellen Sie sicher, dass die statischen Dienstprogramme beim Anzeigen der HTML-Webseite ordnungsgemäß funktionieren.
Lassen Sie uns die folgenden Schritte untersuchen:
Schritt 1: Konfigurieren Sie statische Dienstprogramme in der Datei „tailwind.config.js“.
Öffne das ' tailwind.config.js ”-Datei und fügen Sie die Datei „ Plugins ' Abschnitt. Verwenden Sie dann die „ addUtilities() ”-Funktion zum Konfigurieren der gewünschten statischen Dienstprogramme. Beispielsweise haben wir die folgenden statischen Dienstprogramme konfiguriert:
const Plugin = require('tailwindcss/plugin')
module.exports = {
Inhalt: ['./index.html'],
Plugins: [
Plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'versteckt',
},
'.bg-coral': {
Hintergrund: 'Koralle'
},
'.skew-5deg': {
transformieren: 'skewY(-5deg)',
},
})
})
]
};
Hier:
- Der ' addUtilities() Die Funktion registriert die benutzerdefinierten statischen Dienstprogramme, indem sie ein Objekt bereitstellt, das Dienstprogrammklassen und ihre entsprechenden Stile enthält.
- Der ' .content-auto Die Utility-Klasse setzt die Eigenschaft „content-visibility“ auf „auto“.
- Der ' .content-hidden Die Utility-Klasse setzt die Eigenschaft „content-visibility“ auf „hidden“.
- Der ' .bg-koralle Die Utility-Klasse setzt die Korallenfarbe auf den Hintergrund.
- Der ' .skew-5deg Die Utility-Klasse setzt die Transformationseigenschaft auf skewY(-5deg).
Schritt 2: Verwenden Sie die statischen Dienstprogramme im HTML-Programm
Nutzen Sie nun die gewünschten statischen Utilities im HTML-Programm:
< div Klasse = „h-screen bg-coral“ >
< P Klasse = „content-auto“ >Hallo< / P >
< P Klasse = „Inhalt ausgeblendet“ >Willkommen hier< / P >
< P Klasse = „skew-5deg“ >Text transformieren< / P >
< / div >
< / Körper >
Schritt 3: Ausgabe überprüfen
Führen Sie abschließend das HTML-Programm aus, um sicherzustellen, dass die statischen Dienstprogramme ordnungsgemäß funktionieren:
Die obige Ausgabe zeigt an, dass die statischen Dienstprogramme gemäß ihrer Definition ordnungsgemäß funktionieren.
Abschluss
Um die statischen Dienstprogramme in Tailwind verwenden zu können, ist es erforderlich, „ addUtilities() ”-Funktion in der Datei „tailwind.config.js“ und konfigurieren Sie die gewünschten statischen Dienstprogramme. Die Funktion „addUtilities()“ und das Hinzufügen von Dienstprogrammklassen, die direkt im HTML-Programm angewendet werden können. In diesem Artikel wurde die Methode zur Verwendung statischer Dienstprogramme in Tailwind CSS erläutert.