Αυτό το άρθρο αναλύει την πλήρη διαδικασία για τη δημιουργία μιας προεπιλογής στο Tailwind.
Πώς να δημιουργήσετε μια 'Προεπιλογή' στο Tailwind;
ουραίος άνεμος' Προεπιλογές ' θεωρούνται τα κανονικά αντικείμενα διαμόρφωσης που καθορίζουν την ίδια ρύθμιση παραμέτρων όπως ορίζεται στο αρχείο διαμόρφωσης 'tailwind.config.js'. Το 'προκαθορισμένο' αρχείο δεν δημιουργείται από προεπιλογή, ωστόσο μπορεί να δημιουργηθεί ακολουθώντας τα παρακάτω βήματα:
Βήμα 1: Δημιουργήστε ένα 'Προκαθορισμένο' Αρχείο
Πρώτα, δημιουργήστε ένα ' προκαθορισμένο.js ” αρχείο στο έργο Tailwind και προσθέστε όλες τις επιθυμητές επιλογές διαμόρφωσης, όπως επεκτάσεις, παρακάμψεις θεμάτων, προσθήκη προσθηκών και πολλά άλλα:
// Παράδειγμα προεπιλογής
μονάδα μέτρησης. εξαγωγές = {
θέμα : {
χρωματιστά : {
μπλε : {
φως : '#85d7ff' ,
ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ : '#1fb6ff' ,
σκοτάδι : '#009 σέλα' ,
} ,
ροζ : {
φως : '#ff7ce5' ,
ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ : '#ff49db' ,
σκοτάδι : '#ff16d1' ,
} ,
γκρί : {
πιο σκοτεινό : '#1f2d3d' ,
σκοτάδι : '#3c4858' ,
ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ : 'σε #c0cc' ,
φως : '#e0e6ed' ,
πιο ελαφρύ : '#f9fafc' ,
}
} ,
γραμματοσειράΟικογένεια : {
χωρίς : [ 'γραφικός' , 'Σανς σέριφ' ] ,
} ,
Πατήστε ' Ctrl+S ” για να αποθηκεύσετε το παραπάνω αρχείο.
Βήμα 2: Επεξεργαστείτε το Αρχείο 'tailwind.config.js'.
Στη συνέχεια, μεταβείτε στο ' tailwind.config.js ' αρχείο διαμόρφωσης, καθορίστε το όνομα των διαδρομών προτύπου καθώς και καθορίστε το ' προκαθορισμένο.js ' αρχείο με το ' προεπιλογές » λέξη κλειδί:
μονάδα μέτρησης. εξαγωγές = {
περιεχόμενο : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
προεπιλογές : [
( 'preset.js' )
]
}
Πατήστε ' Ctrl+S ” για να αποθηκεύσετε το αρχείο.
Βήμα 3: Εκτελέστε την εφαρμογή
Τώρα, εκτελέστε το υπάρχον ' γρήγορο έργο » στον διακομιστή ανάπτυξης πληκτρολογώντας την ακόλουθη εντολή:
npm εκτέλεση dev 
Τέλος, κάντε κλικ στον σύνδεσμο 'localhost' για να εμφανίσετε την έξοδο.
Παραγωγή
Όπως φαίνεται, η έξοδος επιστρέφει ένα έργο vite με στυλ 'Tailwind CSS'.
συμπέρασμα
Στο Tailwind, δημιουργήστε ένα ' προκαθορισμένο ' αρχείο στο έργο και καθορίστε όλες τις διαμορφώσεις του ' tailwind.config.js ' αρχείο σε αυτό. Μετά από αυτό, καθορίστε το αρχείο 'preset.js' στο αρχείο 'tailwind.config.js' με τη βοήθεια της λέξης-κλειδιού 'preset'. Το νέο αρχείο 'preset.js' που δημιουργήθηκε θα ενσωματώσει όλο το προσαρμοσμένο CSS στο καθορισμένο πρότυπο όπως το αρχείο 'tailwind.config.js'. Αυτό το άρθρο παρουσίασε την πλήρη διαδικασία για τη δημιουργία μιας προεπιλογής στο Tailwind.