Αυτό το άρθρο θα εξηγήσει τη μέθοδο χρήσης των στατικών βοηθητικών προγραμμάτων στο Tailwind CSS.
Πώς να χρησιμοποιήσετε τα Static Utilities στο Tailwind;
Για να χρησιμοποιήσετε τα στατικά βοηθητικά προγράμματα στο Tailwind, προσθέστε το ' addUtilities() ' λειτουργεί στο αρχείο 'tailwind.config.js' και διαμορφώνει τα επιθυμητά στατικά βοηθητικά προγράμματα. Στη συνέχεια, χρησιμοποιήστε στατικά βοηθητικά προγράμματα στο πρόγραμμα HTML και βεβαιωθείτε ότι τα στατικά βοηθητικά προγράμματα λειτουργούν σωστά κατά την προβολή της ιστοσελίδας HTML.
Ας εξερευνήσουμε τα ακόλουθα βήματα:
Βήμα 1: Διαμορφώστε τα Static Utilities στο Αρχείο 'tailwind.config.js'.
Ανοιξε το ' tailwind.config.js ' αρχείο και προσθέστε το ' πρόσθετα ' Ενότητα. Στη συνέχεια, χρησιμοποιήστε το ' addUtilities() ” λειτουργία για να διαμορφώσετε τα επιθυμητά στατικά βοηθητικά προγράμματα. Για παράδειγμα, έχουμε διαμορφώσει τα ακόλουθα στατικά βοηθητικά προγράμματα:
const plugin = απαίτηση ('tailwindcss/plugin')
module.exports = {
περιεχόμενο: ['./index.html'],
πρόσθετα: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'κρυφό',
},
'.bg-coral': {
φόντο: 'κοράλι'
},
'.skew-5deg': {
μετασχηματισμός: 'skewY(-5deg)',
},
})
})
]
};
Εδώ:
- Ο ' addUtilities() Η συνάρτηση ” καταγράφει τα προσαρμοσμένα στατικά βοηθητικά προγράμματα παρέχοντας ένα αντικείμενο που περιέχει κατηγορίες βοηθητικών προγραμμάτων και τα αντίστοιχα στυλ τους.
- Ο ' .περιεχόμενο-αυτόματο Η κλάση βοηθητικού προγράμματος ορίζει την ιδιότητα ορατότητας περιεχομένου σε αυτόματη.
- Ο ' .περιεχόμενο-κρυφ Η κλάση βοηθητικού προγράμματος ορίζει την ιδιότητα ορατότητας περιεχομένου σε απόκρυψη.
- Ο ' .bg-coral ” Η κλάση χρησιμότητας θέτει το κοραλί χρώμα στο φόντο.
- Ο ' .λοξή-5deg Η κλάση χρησιμότητας ορίζει την ιδιότητα μετασχηματισμού σε skewY(-5deg).
Βήμα 2: Χρησιμοποιήστε το πρόγραμμα Static Utilities in HTML
Τώρα, χρησιμοποιήστε τα επιθυμητά στατικά βοηθητικά προγράμματα στο πρόγραμμα HTML:
< div τάξη = 'h-screen bg-coral' >
< Π τάξη = 'περιεχόμενο-αυτόματο' >Γεια σας< / Π >
< Π τάξη = 'κρυμμένο περιεχόμενο' >Καλώς ήλθατε εδώ< / Π >
< Π τάξη = 'λοξή - 5 μοίρες' >Μετατροπή κειμένου< / Π >
< / div >
< / σώμα >
Βήμα 3: Επαλήθευση εξόδου
Τέλος, εκτελέστε το πρόγραμμα HTML για να βεβαιωθείτε ότι τα στατικά βοηθητικά προγράμματα λειτουργούν σωστά:
Η παραπάνω έξοδος δείχνει ότι τα στατικά βοηθητικά προγράμματα λειτουργούν σωστά σύμφωνα με τα οποία ορίστηκαν.
συμπέρασμα
Για να χρησιμοποιήσετε τα στατικά βοηθητικά προγράμματα στο Tailwind, απαιτείται να χρησιμοποιήσετε το ' addUtilities() ' λειτουργεί στο αρχείο 'tailwind.config.js' και διαμορφώνει τα επιθυμητά στατικά βοηθητικά προγράμματα. Η λειτουργία 'addUtilities()' και προσθήκη κλάσεων βοηθητικού προγράμματος που μπορούν να εφαρμοστούν απευθείας στο πρόγραμμα HTML. Αυτό το άρθρο έχει εξηγήσει τη μέθοδο χρήσης στατικών βοηθητικών προγραμμάτων στο Tailwind CSS.