CodeKitHubΤι είναι αυτό το εργαλείο;
Το Tailwind CSS διαθέτει μια σταθερή προεπιλεγμένη χρωματική κλίμακα αντί να σας επιτρέπει να επιλέγετε αυθαίρετες τιμές για τα κοινά χρώματα διεπαφής χρήστη. Κάθε μία από τις 22 επώνυμες οικογένειες (όπως amber ή slate) έχει ακριβώς 11 αποχρώσεις, αριθμημένες από 50 έως 950, και κάθε απόχρωση έχει μία επίσημη τιμή hex, τεκμηριωμένη από το ίδιο το Tailwind και χρησιμοποιούμενη πανομοιότυπα στις utilities bg-, text-, border- και ring-.
Αυτός ο οδηγός ενσωματώνει τοπικά ολόκληρη την επίσημη παλέτα, ώστε η αναζήτηση ενός χρώματος ή ονόματος κλάσης να μην απαιτεί το άνοιγμα της τεκμηρίωσης του Tailwind, την εκτέλεση ενός build, ή την αποστολή της κλάσης μέσω PurgeCSS απλώς για να δείτε πώς μοιάζει. Οι αναζητήσεις hex χρησιμοποιούν Ευκλείδεια απόσταση RGB για να βρουν την πλησιέστερη επίσημη απόχρωση, ενώ οι αναζητήσεις κλάσης είναι ακριβείς — κάθε τιμή εδώ ταιριάζει με τις τεκμηριωμένες προεπιλογές του Tailwind.
Γιατί να το χρησιμοποιήσετε;
- Επικολλήστε έναν κωδικό hex από ένα αρχείο σχεδίασης ή στιγμιότυπο οθόνης και λάβετε αμέσως το πλησιέστερο όνομα κλάσης Tailwind, αντί να μαντεύετε σε ποια αριθμημένη απόχρωση αντιστοιχεί.
- Πληκτρολογήστε ένα όνομα κλάσης όπως slate-900 ή bg-purple-500 για να δείτε την ακριβή τιμή hex και RGB χωρίς να ψάχνετε στην τεκμηρίωση του Tailwind.
- Περιηγηθείτε στο πλήρες πλέγμα 22 οικογενειών x 11 αποχρώσεων για να συγκρίνετε αποχρώσεις πλάι-πλάι πριν επιλέξετε μία.
- Λάβετε τις παραλλαγές bg-, text-, border- και ring- για οποιαδήποτε απόχρωση με ένα κλικ, καθώς το Tailwind χρησιμοποιεί την ίδια αριθμητική κλίμακα σε όλες.
- Δωρεάν, άμεσο και πλήρως τοπικό — χωρίς μεταφόρτωση, χωρίς λογαριασμό, χωρίς βήμα build.
Πώς χρησιμοποιείται
- Για να βρείτε ένα όνομα κλάσης από έναν κωδικό hex: πληκτρολογήστε ή επικολλήστε την τιμή hex (με ή χωρίς #) στο πεδίο αναζήτησης — η πλησιέστερη επίσημη απόχρωση Tailwind εμφανίζεται πάνω από το πλέγμα, μαζί με την απόσταση χρώματος αν δεν είναι ακριβές αποτέλεσμα.
- Για να βρείτε μια τιμή hex από ένα όνομα κλάσης: πληκτρολογήστε το όνομα της κλάσης ή της οικογένειας (π.χ. amber-500, bg-blue-600, ή απλώς teal) — ένα ακριβές αποτέλεσμα εμφανίζει το hex, το RGB και όλες τις παραλλαγές utility· ένα όνομα οικογένειας μόνο του φιλτράρει το πλέγμα σε αυτή την οικογένεια.
- Για να περιηγηθείτε σε όλα: αφήστε το πεδίο αναζήτησης κενό και κάντε κλικ σε οποιοδήποτε δείγμα στο πλέγμα — οι λεπτομέρειές του εμφανίζονται στο πάνελ από πάνω και ο κωδικός hex του αντιγράφεται αυτόματα.
- Κάντε κλικ σε οποιοδήποτε από τα κουμπιά παραλλαγών bg-/text-/border-/ring- στο πάνελ λεπτομερειών για να αντιγράψετε το ακριβές όνομα κλάσης.
Παράδειγμα
Είσοδος
#c4b5fdΈξοδος
violet-300 — Ακριβές αποτέλεσμα, #C4B5FD, rgb(196, 181, 253)Αυτό το hex είναι μία από τις ίδιες τεκμηριωμένες προεπιλεγμένες τιμές του Tailwind, οπότε η απόσταση είναι 0 και το αποτέλεσμα είναι ακριβές και όχι κατά προσέγγιση.
Συχνές ερωτήσεις
Είναι αυτά τα επίσημα προεπιλεγμένα χρώματα του Tailwind CSS;
Ναι — όλες οι 242 τιμές hex (22 οικογένειες x 11 αποχρώσεις) προέρχονται από την ίδια την τεκμηριωμένη προεπιλεγμένη παλέτα του Tailwind. Το Tailwind v4 αναπαριστά τα χρώματα εσωτερικά ως OKLCH, αλλά η ίδια προεπιλεγμένη παλέτα και τα τεκμηριωμένα ισοδύναμα hex παραμένουν αμετάβλητα από την v3, οπότε αυτές οι τιμές είναι επίκαιρες και για τις δύο εκδόσεις.
Τι σημαίνει όταν μια αναζήτηση hex δεν είναι ακριβές αποτέλεσμα;
Αν επικολλήσετε έναν κωδικό hex που δεν είναι μία από τις 242 προεπιλεγμένες τιμές του Tailwind (για παράδειγμα, ένα προσαρμοσμένο χρώμα εταιρικής ταυτότητας), το εργαλείο εμφανίζει την πλησιέστερη επίσημη απόχρωση βάσει απόστασης RGB και την επισημαίνει ως "Πλησιέστερο αποτέλεσμα" με την απόσταση εμφανιζόμενη — δεν θα είναι πανομοιότυπο pixel-προς-pixel με την είσοδό σας, απλώς η πλησιέστερη προεπιλογή Tailwind.
Γιατί τα bg-, text-, border- και ring- χρησιμοποιούν όλα τους ίδιους αριθμούς;
Το Tailwind εφαρμόζει μία κοινή χρωματική κλίμακα σε κάθε κατηγορία utility, οπότε τα bg-amber-500, text-amber-500, border-amber-500 και ring-amber-500 είναι όλα η ίδια υποκείμενη τιμή hex εφαρμοσμένη σε διαφορετική ιδιότητα CSS. Γι' αυτό το πάνελ λεπτομερειών εμφανίζει και τις τέσσερις παραλλαγές μαζί για κάθε απόχρωση που αναζητάτε.
Μπορώ να αναζητήσω μια ομάδα οικογένειας όπως απλώς "blue" χωρίς αριθμό απόχρωσης;
Ναι — πληκτρολογώντας μόνο ένα όνομα οικογένειας (χωρίς αριθμό) φιλτράρεται το πλέγμα στις 11 αποχρώσεις αυτής της οικογένειας, ώστε να μπορείτε να τις συγκρίνετε πλάι-πλάι, χωρίς να έχετε επιλέξει ακόμη μια συγκεκριμένη απόχρωση.
Καλύπτει αυτό προσαρμοσμένα χρώματα θέματος Tailwind που έχω ορίσει στη διαμόρφωσή μου;
Όχι — αυτός ο οδηγός καλύπτει μόνο την ενσωματωμένη προεπιλεγμένη παλέτα του Tailwind, όχι χρώματα που έχετε προσθέσει ή αντικαταστήσει σε ένα μπλοκ tailwind.config.js theme.extend.colors ή σε ένα μπλοκ @theme της v4. Αν το έργο σας προσαρμόζει την παλέτα, τα πραγματικά χρώματα απόδοσης ενδέχεται να διαφέρουν από αυτά που εμφανίζονται εδώ για το ίδιο όνομα κλάσης.