Αυτό το άρθρο θα εξηγήσει:
- Τι κάνουν οι οθόνες, τα χρώματα και η απόσταση στο θέμα Tailwind;
- Πώς να χρησιμοποιήσετε οθόνες, χρώματα και διαστήματα στο θέμα Tailwind;
- Πώς να ρυθμίσετε τις οθόνες, τα χρώματα και το διάστημα στο θέμα Tailwind;
Τι κάνουν οι οθόνες, τα χρώματα και η απόσταση στο θέμα Tailwind;
ο οθόνες Το κλειδί επιτρέπει στους χρήστες να τροποποιούν τα σημεία διακοπής απόκρισης στο έργο Tailwind. Τα σημεία διακοπής είναι τα σημεία όπου αλλάζει η διάταξη με βάση το πλάτος της οθόνης. Από προεπιλογή, το Tailwind περιλαμβάνει πέντε οθόνες, δηλαδή sm (μικρή), md (μεσαία), lg (μεγάλη) και xl (εξαιρετικά μεγάλη). Ωστόσο, οι χρήστες μπορούν να ορίσουν τα σημεία διακοπής τους χρησιμοποιώντας το κλειδί 'οθόνες' και στη συνέχεια να τα χρησιμοποιήσουν στο πρόγραμμα HTML.
Χρωματιστά Το κλειδί χρησιμοποιείται για την τροποποίηση της παλέτας χρωμάτων. Τα χρώματα είναι ένα από τα πιο βασικά χαρακτηριστικά του σχεδιασμού. Το θέμα Tailwind παρέχει μια προεπιλεγμένη χρωματική παλέτα με μεγάλη γκάμα αποχρώσεων, αλλά οι χρήστες μπορούν επίσης να την προσαρμόσουν ή να την επεκτείνουν με τα χρώματά τους. Οι χρήστες μπορούν να ορίσουν χρώματα χρησιμοποιώντας το κλειδί 'colors' και στη συνέχεια να τα χρησιμοποιήσουν με οποιαδήποτε κατηγορία βοηθητικού προγράμματος που σχετίζεται με το χρώμα στον κώδικα HTML.
ο απόσταση Το κλειδί χρησιμοποιείται για την τροποποίηση της κλίμακας απόστασης και μεγέθους. Η απόσταση είναι μια άλλη βασική πτυχή του σχεδιασμού, καθώς επηρεάζει την αναγνωσιμότητα, την ευθυγράμμιση και την ισορροπία των στοιχείων. Το θέμα Tailwind παρέχει μια σταθερή κλίμακα απόστασης με βάση μια τιμή βάσης 4 pixel (0,25rem). Ωστόσο, μπορεί επίσης να προσαρμοστεί ή να επεκταθεί με προσαρμοσμένες τιμές. Οι χρήστες μπορούν να ορίσουν τιμές διαστήματος χρησιμοποιώντας το κλειδί 'διάστημα' και στη συνέχεια να τις χρησιμοποιήσουν με οποιαδήποτε κατηγορία βοηθητικού προγράμματος που σχετίζεται με το διάστημα στο αρχείο προγράμματος.
Πώς να χρησιμοποιήσετε οθόνες, χρώματα και διαστήματα στο θέμα Tailwind;
Για να χρησιμοποιήσετε οθόνες, χρώματα και διαστήματα στο θέμα Tailwind, δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε τις προεπιλεγμένες ιδιότητες οθόνης, χρωμάτων και διαστημάτων όπως απαιτείται. Στη συνέχεια, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα HTML. Ας ακολουθήσουμε τα παρακάτω βήματα:
Βήμα 1: Δημιουργία ιστοσελίδας HTML
Πρώτα, δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε τις προεπιλεγμένες ιδιότητες οθόνης, χρωμάτων και διαστημάτων:
<σώμα > = 'text-3xl m-5 sm:text-white text-center' >
Υπόδειξη Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Καλώς ήρθατε σε αυτό το σεμινάριο
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Καλώς ήρθατε σε αυτό το σεμινάριο
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Θέματα
>
>
>
Εδώ:
- ' -σελ-10 ' και ' m-5 ” είναι η ιδιότητα απόστασης.
- ' sm », « md », « lg ', και ' xl ” είναι οι ιδιότητες της οθόνης.
- ' κόκκινο-700 », « μπλε-600 », « πράσινο-500 », « ροζ-700 ', και ' άσπρο ” είναι οι ιδιότητες του χρώματος.
Βήμα 2: Εκτελέστε το πρόγραμμα HTML
Στη συνέχεια, εκτελέστε το πρόγραμμα HTML για να προβάλετε την ιστοσελίδα HTML:
Στην παραπάνω έξοδο, φαίνονται οι προεπιλεγμένες οθόνες, τα χρώματα και οι ιδιότητες απόστασης.
Πώς να ρυθμίσετε τις οθόνες, τα χρώματα και το διάστημα στο θέμα Tailwind;
Για να διαμορφώσετε οθόνες, χρώματα και διαστήματα στο θέμα Tailwind, δείτε τα βήματα που παρέχονται:
- Ανοιξε το ' tailwind.config.js ' αρχείο.
- Μεταβείτε στο ' θέμα ' και προσαρμόστε τις οθόνες, τα χρώματα και τις ιδιότητες απόστασης όπως απαιτείται.
- Χρησιμοποιήστε τις προσαρμοσμένες ιδιότητες στο πρόγραμμα HTML.
- Δείτε την ιστοσελίδα HTML για επαλήθευση.
Βήμα 1: Διαμορφώστε τις οθόνες, τα χρώματα και το διάστημα στο αρχείο διαμόρφωσης Tailwind
Στο ' θέμα ' ενότητα του ' tailwind.config.js ', προσαρμόστε τις οθόνες, τα χρώματα και τις ιδιότητες απόστασης ανάλογα με τις ανάγκες. Για παράδειγμα, έχουμε προσαρμόσει αυτές τις ιδιότητες ως εξής:
μονάδα μέτρησης .εξαγωγές = {περιεχόμενο : [ './index.html' ] ,
θέμα : {
//προσαρμογή οθονών
οθόνες : {
sm : '480 px' ,
md : '668 px' ,
lg : '876 px' ,
xl : '1100 px' ,
} ,
//προσαρμογή χρωμάτων
χρωματιστά : {
άσπρο : #φφφφφ ,
μαύρος : '#000000' ,
μπλε : '#08609c' ,
πράσινος : '#089c28' ,
το κόκκινο : '#9c0306' ,
κίτρινος : '#ede60e' ,
ροζ : '#ed0e55' ,
} ,
//προσαρμογή διαστήματος
απόσταση : {
px : '1 px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 πράγμα' ,
'5' : '1,25 εκ.' ,
'6' : '1,5 εκ.' ,
'8' : '2 rem' ,
'10' : '2,5 εκ.' ,
'12' : '3 ώρες' ,
'16' : '4 ώρες' ,
'είκοσι' : '5 rem' ,
}
} ,
} ;
Σε αυτόν τον κώδικα:
- Ο ' οθόνες Η ιδιότητα ' ορίζει σημεία διακοπής οθόνης για διάφορα μεγέθη. Παρέχει ψευδώνυμα (όπως sm, md, lg, xl) και τις ισοδύναμες τιμές τους.
- Ο ' χρωματιστά Η ιδιότητα ορίζει προσαρμοσμένα χρώματα χρησιμοποιώντας το όνομά τους και τα ζεύγη δεκαεξαδικών τιμών.
- Ο ' απόσταση Η ιδιότητα ” καθορίζει προσαρμοσμένες τιμές διαστήματος για πολλά μεγέθη. Χρησιμοποιεί ψευδώνυμα (όπως px, 0, 1, 2, κ.λπ.) για να αναπαραστήσει συγκεκριμένες τιμές διαστήματος σε μονάδες 'rem'.
Βήμα 2: Χρησιμοποιήστε τις διαμορφωμένες ιδιότητες σε πρόγραμμα HTML
Τώρα, χρησιμοποιήστε τις προσαρμοσμένες ιδιότητες στο πρόγραμμα HTML:
<σώμα > = 'text-3xl m-5 sm:text-white text-center' >
Υπόδειξη Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Καλώς ήρθατε σε αυτό το σεμινάριο
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
Καλώς ήρθατε σε αυτό το σεμινάριο
>
= 'text-2xl m-5 lg:text-white text-center' >
Tailwind CSS
>
= 'text-2xl m-5 xl:text-white text-center' >
Θέματα
>
>
>
Βήμα 3: Προβολή ιστοσελίδας HTML
Τέλος, επαληθεύστε την έξοδο προβάλλοντας την ιστοσελίδα HTML:
Μπορεί να παρατηρηθεί ότι το περιεχόμενο της ιστοσελίδας αλλάζει ανάλογα με τις διαμορφωμένες οθόνες, τα χρώματα και τις ιδιότητες διαστήματος.
συμπέρασμα
ο οθόνες το κλειδί επιτρέπει στους χρήστες να προσαρμόζουν/τροποποιούν τα αποκρινόμενα σημεία διακοπής, το χρωματιστά Το κλειδί χρησιμοποιείται για την προσαρμογή της παλέτας χρωμάτων για το έργο και το απόσταση Το κλειδί χρησιμοποιείται για την προσαρμογή της κλίμακας απόστασης και μεγέθους. Επιπλέον, οι χρήστες μπορούν να προσαρμόσουν αυτά τα κλειδιά ή ιδιότητες σύμφωνα με τις ανάγκες τους. Αυτό το άρθρο εξηγεί τις οθόνες, τα χρώματα και τα κενά στο θέμα Tailwind.