Ο Βοηθός Tailwind επιθεωρεί οποιοδήποτε στοιχείο σε μια ιστοσελίδα και δημιουργεί μια ολοκληρωμένη, κατηγοριοποιημένη ανάλυση των αντίστοιχων κλάσεων Tailwind CSS. Αντί για μια απλή συμβολοσειρά κλάσεων, οργανώνει τα αποτελέσματα ανά κατηγορία — Layout, Spacing, Typography, Colors, Borders και Effects — ώστε να κατανοείτε ακριβώς τι ελέγχει κάθε κλάση.
Ενώ το Copy as Tailwind σάς δίνει μια γρήγορη συμβολοσειρά κλάσεων για επικόλληση, ο Βοηθός Tailwind είναι ο σύντροφος για εις βάθος ανάλυση. Είναι σχεδιασμένος για προγραμματιστές που θέλουν να κατανοήσουν την πλήρη σύνθεση στυλ ενός στοιχείου σε όρους Tailwind. Κάθε υπολογισμένη ιδιότητα CSS αντιστοιχίζεται στο ισοδύναμό της σε Tailwind και ομαδοποιείται σε λογικές κατηγορίες. Μπορείτε να δείτε με μια ματιά ότι ένα στοιχείο χρησιμοποιεί flex layout με items-center, έχει p-5 padding με gap-3 μεταξύ παιδιών, χρησιμοποιεί text-lg font-bold για typography, και έχει εμφάνιση bg-slate-900 rounded-lg border border-slate-700. Κάντε κλικ σε οποιαδήποτε ετικέτα κλάσης για να αντιγράψετε μόνο αυτήν, ή χρησιμοποιήστε το Copy All για να πάρετε ολόκληρη τη συμβολοσειρά. Η κατηγοριοποιημένη προβολή διευκολύνει την επιλογή ακριβώς των κλάσεων που χρειάζεστε.
Οι κλάσεις Tailwind οργανώνονται σε σαφείς κατηγορίες: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (μέγεθος γραμματοσειράς, βάρος, χρώμα), Colors (φόντο, κείμενο, περίγραμμα), Borders (ακτίνα, πλάτος, στυλ) και Effects (σκιά, αδιαφάνεια, μετασχηματισμός). Κάθε κατηγορία είναι συμπτυσσόμενη και σαφώς επισημασμένη.
Κάντε κλικ σε οποιοδήποτε στοιχείο — κουμπιά, κάρτες, επικεφαλίδες, πεδία εισόδου, containers — και ο πίνακας γεμίζει αμέσως με την πλήρη ανάλυση κλάσεων Tailwind. Το στοιχείο επισημαίνεται με μωβ περίγραμμα ώστε να ξέρετε ακριβώς τι επιθεωρείται.
Κάθε κλάση Tailwind εμφανίζεται ως κλικαριστή ετικέτα. Κάντε κλικ σε οποιαδήποτε ετικέτα (όπως p-5 ή font-bold) για να αντιγράψετε μόνο αυτή την κλάση στο πρόχειρο. Ένα διακριτικό animation επιβεβαιώνει την ενέργεια. Ιδανικό όταν χρειάζεστε μόνο μία ή δύο συγκεκριμένες κλάσεις.
Το κουμπί Copy All Classes στο κάτω μέρος δημιουργεί μια καθαρή, διαχωρισμένη με κενά συμβολοσειρά όλων των κλάσεων Tailwind και την αντιγράφει στο πρόχειρο. Έτοιμο για επικόλληση απευθείας σε className ή class.
Κάθε τιμή αντιστοιχίζεται στην προεπιλεγμένη κλίμακα spacing και sizing του Tailwind. Μια γραμματοσειρά 16px αντιστοιχίζεται σε text-base, padding 24px σε p-6, και #7c3aed σε purple-600. Όταν δεν υπάρχει ακριβής αντιστοιχία, επιλέγεται η πλησιέστερη τιμή κλίμακας.
Τοποθετήστε τον δείκτη πάνω από οποιαδήποτε ετικέτα κλάσης Tailwind στον πίνακα για να δείτε την αρχική υπολογισμένη τιμή CSS από την οποία δημιουργήθηκε. Για παράδειγμα, το hover πάνω από p-5 δείχνει padding: 20px. Αυτή η αμφίδρομη προβολή σας βοηθά να μάθετε την κλίμακα Tailwind.
Βοηθός Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*Σε αντίθεση με μια επίπεδη συμβολοσειρά κλάσεων, η κατηγοριοποιημένη προβολή σάς επιτρέπει να κατανοήσετε την πλήρη σύνθεση ενός στοιχείου. Δείτε ότι μια κάρτα χρησιμοποιεί flex layout, συγκεκριμένο padding, έντονη τυπογραφία, slate φόντο, στρογγυλά περιγράμματα και διακριτική σκιά — κάθε πτυχή στη δική της ενότητα.
Επιθεωρήστε ένα καλοσχεδιασμένο στοιχείο σε οποιοδήποτε ιστότοπο, στη συνέχεια αναδημιουργήστε το στο Tailwind project σας αντιγράφοντας τις σχετικές κλάσεις κατηγορίας. Πάρτε το layout από ένα στοιχείο, τυπογραφία από άλλο και χρώματα από την παλέτα της επωνυμίας σας.
Τοποθετήστε τον δείκτη πάνω από ετικέτες κλάσεων για να δείτε τις πηγαίες τιμές CSS. Αυτή η διαδραστική αντιστοίχιση είναι ο γρηγορότερος τρόπος να μάθετε ότι το p-4 σημαίνει 16px, το text-lg σημαίνει 18px, ή ότι το purple-600 είναι #7c3aed.
Επιθεωρήστε στοιχεία στον δικό σας ιστότοπο που είναι κατασκευασμένος με Tailwind για να επαληθεύσετε ότι χρησιμοποιούν συνεπές spacing, χρώματα και τυπογραφία από το design system. Εντοπίστε τυχαίες μεμονωμένες τιμές (όπως p-[13px]) που θα έπρεπε να είναι τιμές κανονικής κλίμακας.
Χρησιμοποιήστε το Copy as Tailwind όταν χρειάζεστε μια γρήγορη συμβολοσειρά κλάσεων για επικόλληση. Χρησιμοποιήστε τον Βοηθό Tailwind όταν θέλετε να μελετήσετε την ανάλυση, να αντιγράψετε επιλεκτικά μεμονωμένες κλάσεις, ή να κατανοήσετε γιατί επιλέχθηκαν συγκεκριμένες κλάσεις Tailwind.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο του Βοηθού Tailwind. Το εργαλείο ενεργοποιείται και εμφανίζεται ένας πίνακας στα δεξιά, έτοιμος να εμφανίσει αναλύσεις κλάσεων.
Κάντε κλικ σε οποιοδήποτε στοιχείο στη σελίδα. Επισημαίνεται με μωβ περίγραμμα και ο πίνακας γεμίζει με κατηγοριοποιημένες κλάσεις Tailwind. Κάθε κατηγορία (Layout, Spacing, Typography, Colors, Borders, Effects) εμφανίζεται ως ενότητα με ετικέτες κλάσεων.
Περιηγηθείτε στις κατηγορίες για να κατανοήσετε την πλήρη σύνθεση στυλ του στοιχείου. Κάθε κλάση είναι κλικαριστή ετικέτα — hover για να δείτε την πηγαία τιμή CSS, κλικ για αντιγραφή αυτής της κλάσης.
Κάντε κλικ σε μεμονωμένες ετικέτες για αντιγραφή συγκεκριμένων κλάσεων, ή χρησιμοποιήστε το κουμπί Copy All Classes στο κάτω μέρος για να πάρετε τα πάντα ως μία συμβολοσειρά. Επικολλήστε απευθείας στο Tailwind component σας.
Κάντε κλικ σε διαφορετικό στοιχείο στη σελίδα για να ενημερωθεί αμέσως ο πίνακας με νέες κλάσεις. Δεν χρειάζεται απενεργοποίηση και επανενεργοποίηση — απλά συνεχίστε να κάνετε κλικ για επιθεώρηση πολλών στοιχείων διαδοχικά.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.