Αυτή η εγγραφή θα επεξηγήσει τη μέθοδο για το στυλ επικεφαλίδων προσθέτοντας το βασικό στυλ στο Tailwind.
Πώς να κάνετε στυλ επικεφαλίδων χρησιμοποιώντας το βασικό στυλ Tailwind;
Για να δημιουργήσετε στυλ επικεφαλίδων στο Tailwind, ανατρέξτε στα βήματα που παρέχονται:
- Ανοίξτε το αρχείο CSS του έργου.
- Στο αρχείο CSS, προσθέστε το βασικό στυλ στις επικεφαλίδες χρησιμοποιώντας το ' @στρώμα «οδηγία βάσει του « @tailwind βάση? » οδηγία.
- Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε στοιχεία επικεφαλίδας σε αυτό.
- Εκτελέστε το πρόγραμμα HTML και επαληθεύστε την έξοδο.
Βήμα 1: Προσθέστε βασικό στυλ στις επικεφαλίδες στο αρχείο CSS
Πρώτα, ανοίξτε το ' στυλ.css ' αρχείο και προσθέστε το βασικό στυλ στις επικεφαλίδες σε αυτό χρησιμοποιώντας το ' @στρώμα » οδηγία. Για παράδειγμα, προσθέσαμε το βασικό στυλ στις ακόλουθες επικεφαλίδες:
@άνεμος εκ των όπισθεν βάση ;
@στρώμα βάση {
h1 {
@ισχύουν text-6xl ;
}
h2 {
@ισχύουν κείμενο-5xl ;
}
h3 {
@ισχύουν κείμενο-4xl ;
}
h4 {
@ισχύουν κείμενο-3xl ;
}
h5 {
@ισχύουν κείμενο-2xl ;
}
}
@άνεμος εκ των όπισθεν συστατικά ;
@άνεμος εκ των όπισθεν υπηρεσίες κοινής ωφέλειας ;
Εδώ:
- ' Βάση @layer {…} ” ορίζει ένα νέο βασικό επίπεδο και περιέχει τα στυλ για τα στοιχεία επικεφαλίδας.
- ' h1 { @apply text-6xl; } 'εφαρμόζει το ' text-6xl 'κλάση χρησιμότητας στο ' h1 ” στοιχεία.
- Ομοίως, « h2 », « h3 », « h4 ', και ' h5 Τα στοιχεία έχουν τα μεγέθη γραμματοσειράς τους που ορίζονται χρησιμοποιώντας το @ισχύουν ” και αντίστοιχες κατηγορίες βοηθητικών προγραμμάτων (text-5xl, text-4xl, text-3xl και text-2xl).
Βήμα 2: Δημιουργία ιστοσελίδας HTML χρησιμοποιώντας επικεφαλίδες
Στη συνέχεια, φτιάξτε το πρόγραμμα HTML και χρησιμοποιήστε τα στοιχεία επικεφαλίδας σε αυτό. Εδώ, χρησιμοποιήσαμε τα ακόλουθα στοιχεία επικεφαλίδας:
< σώμα >
< div τάξη = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Επικεφαλίδα 1 < / h1 >
< h2 > Επικεφαλίδα 2 < / h2 >
< h3 > Επικεφαλίδα 3 < / h3 >
< h4 > Κεφάλαιο 4 < / h4 >
< h5 > Κεφάλαιο 5 < / h5 >
< / div >
< / σώμα >
Βήμα 3: Εκτελέστε το πρόγραμμα HTML
Τέλος, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα για επαλήθευση:
Η παραπάνω έξοδος εμφανίζει τις επικεφαλίδες όπως ήταν στυλ στο αρχείο CSS.
συμπέρασμα
Για να διαμορφώσετε επικεφαλίδες στο Tailwind, ανοίξτε το αρχείο CSS και προσθέστε το βασικό στυλ στις επικεφαλίδες χρησιμοποιώντας το ' @στρώμα «οδηγία βάσει του « @tailwind βάση? » οδηγία. Στη συνέχεια, φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε στοιχεία επικεφαλίδας σε αυτό. Τέλος, προβάλετε την ιστοσελίδα HTML για να επαληθεύσετε την έξοδο. Αυτή η εγγραφή έχει εξηγήσει τη μέθοδο για το στυλ επικεφαλίδων προσθέτοντας το βασικό στυλ στο Tailwind.