Προσθήκη βασικών στυλ στο Tailwind

Αυτή η ανάρτηση απεικονίζει όλες τις πιθανές πτυχές για την προσθήκη «στυλ βάσης» στο Tailwind CSS.

Πώς να προσθέσετε στυλ 'βάσης' στο Tailwind;

Το 'Tailwind CSS' συνοδεύεται από τις ακόλουθες τρεις μεθόδους για να προσθέσετε τα 'βασικά' στυλ σε ολόκληρο το περιεχόμενο HTML ή σε ένα συγκεκριμένο στοιχείο:

• Χρησιμοποιήστε το 'CSS' για να προσθέσετε βασικά στυλ στο Tailwind.
• Χρησιμοποιήστε το 'Plugin' για να προσθέσετε βασικά στυλ στο Tailwind.

Ας τα εξερευνήσουμε ένα προς ένα.

Προαπαιτούμενα
Πριν προχωρήσετε στην πρακτική εφαρμογή, πρώτα ρίξτε μια ματιά στο πρόσφατα δημιουργημένο έργο με το όνομα 'Linuxhin' που χρησιμοποιείται για την προσθήκη των 'βασικών στυλ':

Δομή αρχείου έργου

Τώρα, μεταβείτε στο αρχείο 'index.html' και ρίξτε μια ματιά στον κώδικα HTML του:

Στις παραπάνω γραμμές κώδικα:

Παραγωγή
Η έξοδος του παραπάνω κώδικα φαίνεται εδώ:

Τώρα, χρησιμοποιήστε τη μέθοδο που συζητήθηκε για να προσαρμόσετε τον παραπάνω κώδικα HTML προσθέτοντας τα βασικά στυλ. Ας ξεκινήσουμε με τη μέθοδο Tailwind 'CSS'.

Μέθοδος 1: Χρησιμοποιήστε το CSS για να προσθέσετε 'βασικά στυλ' στο Tailwind

Η απλούστερη και ευκολότερη μέθοδος για να προσθέσετε στυλ βάσης στο συγκεκριμένο στοιχείο HTML είναι να τα προσθέσετε στο κύριο αρχείο CSS του έργου. Ας εκτελέσουμε αυτήν την εργασία πρακτικά ακολουθώντας τα παρακάτω βήματα.

Βήμα 1: Ανοίξτε το Αρχείο CSS
Αρχικά, ανοίξτε το κύριο αρχείο CSS, π.χ., ' στυλ.css ' που περιέχει την ενσωματωμένη 'βάση' του ουρανού ανέμου, τα 'εξαρτήματα' και τα επίπεδα 'utilities':

Βήμα 2: Προσθέστε το CSS
Στη συνέχεια, προσθέστε το στυλ 'base' για τα συγκεκριμένα στοιχεία HTML '

' και '

' εφαρμόζοντας τις κλάσεις χρησιμοποιώντας το ' @ισχύουν » οδηγία στο επίπεδο «βάσης» με τη βοήθεια του « @στρώμα » λέξη-κλειδί. Οι λέξεις-κλειδιά «@layer» προσθέτουν τις καθορισμένες κλάσεις στο καθορισμένο επίπεδο «βάσης»:

Βάση @layer {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}

Στις παραπάνω γραμμές κώδικα, το ' Μέγεθος γραμματοσειράς Η κλάση εφαρμόζεται στα στοιχεία «

» και «

» για μεγέθυνσή τους μέχρι το καθορισμένο μέγεθος, αντίστοιχα:

Αποθηκεύστε (Ctrl + S) το αρχείο.

Βήμα 3: Έξοδος
Τώρα, εκτελέστε τον κώδικα στον ζωντανό διακομιστή και δείτε την έξοδο, ως εξής:

Εδώ, η έξοδος δείχνει ότι η κλάση Tailwind 'Μέγεθος γραμματοσειράς' εφαρμόζεται με επιτυχία στο καθορισμένο στοιχείο στο βασικό επίπεδο.

Σημείωση : Η ίδια προσέγγιση χρησιμοποιείται για όλες τις άλλες κλάσεις Tailwind CSS.

Μέθοδος 2: Χρησιμοποιήστε το Plugin για να προσθέσετε 'βασικά στυλ' στο Tailwind

Μια άλλη χρήσιμη μέθοδος για να προσθέσετε στυλ 'βάσης' είναι να γράψετε ένα ' συνδέω ' και χρησιμοποιήστε το ' addBase() ' λειτουργία. Αυτή η λειτουργία βοηθά στην εγγραφή νέων τάξεων στο ' βάση Οδηγία για το επίπεδο. Αυτή η συνάρτηση χρησιμοποιείται στο αρχείο Tailwind 'tailwind.config.js'. Ας το κάνουμε πρακτικά.

Βήμα 1: Ορίστε τη συνάρτηση 'addBase()'.
Πρώτα, μεταβείτε στο ' tailwind.config.js ” αρχείο ρυθμίσεων και προσθέστε τα βασικά στυλ από το πρόσθετο και καλέστε τη συνάρτηση “addBase()”:

Αποθηκεύστε το αρχείο.

Βήμα 2: Έξοδος
Τέλος, εκτελέστε τον δεδομένο κώδικα HTML και δείτε την έξοδο:

Όπως φαίνεται, η κλάση 'Μέγεθος γραμματοσειράς' Tailwind που ορίζεται στη συνάρτηση 'addBase()' ως αντικείμενο JavaScript εφαρμόζεται στα καθορισμένα στοιχεία HTML.

συμπέρασμα

Τα στυλ βάσης Tailwind μπορούν να προστεθούν εύκολα χρησιμοποιώντας το ' CSS ' τάξεις στο κύριο αρχείο CSS και το ' Συνδέω ' με την ' addBase() ' στο αρχείο ρυθμίσεων. Η μέθοδος 'CSS' θεωρείται η απλούστερη μέθοδος, καθώς ορίζει μόνο τα βασικά στυλ στο επίπεδο 'βάσης' και τα εφαρμόζει αυτόματα στο καθορισμένο στοιχείο. Από την άλλη πλευρά, η ενότητα 'πρόσθετο' του ' tailwind.config.js ” το αρχείο απαιτεί τη συνάρτηση “addBase()” για να ορίσει τα βασικά στυλ ως αντικείμενα JavaScript. Αυτή η ανάρτηση επεξηγεί όλες τις πιθανές πτυχές για την προσθήκη βασικών στυλ στο Tailwind CSS.