Μπορεί να μετατρέψει το CSS σε Tailwind;

Ναί. Επικολλήστε ένα μπλοκ δήλωσης CSS και το Tailfind το εφαρμόζει σε ένα δείγμα στοιχείο πριν εξαγάγει την πλησιέστερη λίστα κλάσεων Tailwind.

Διατηρούνται οι προσαρμοσμένες τιμές;

Το Tailfind αντιστοιχίζει τις τιμές στα προεπιλεγμένα utility του Tailwind όταν είναι δυνατόν και διατηρεί τις μη προεπιλεγμένες τιμές ορατές ως arbitrary utility αντί να τις αποκρύπτει.

Πρέπει να επικολλήσω ένα πλήρες φύλλο στυλ;

Ο μετατροπέας CSS έχει σχεδιαστεί για μπλοκ δηλώσεων. Χρησιμοποιήστε τον μετατροπέα HTML/CSS όταν χρειάζονται επιλογείς, κλάσεις, ένθετη σήμανση ή πληρέστερο φύλλο στυλ.

Μετατροπέας CSS σε Tailwind

Επικολλήστε ένα μπλοκ δήλωσης CSS και μετατρέψτε το αποδοθέν δείγμα σε κλάσεις Tailwind που μπορείτε να αντιγράψετε σε στοιχεία.

CSS

Tailwind v4

Δεν υπάρχει ακόμα έξοδος

Η δημιουργημένη έξοδος Tailwind εμφανίζεται εδώ αυτόματα.

Μετατροπέας Tailwind με ακρίβεια pixel

Μετατρέψτε το CSS σε καθαρές κλάσεις Tailwind

Μετατροπή με βάση τις δηλώσεις: Επικολλήστε ένα μπλοκ δήλωσης CSS και το Tailfind το εφαρμόζει σε ένα δείγμα στοιχείο πριν μετατρέψει το αποτέλεσμα που αποδίδεται σε επαναχρησιμοποιήσιμες κλάσεις Tailwind.
Προτίμηση προεπιλεγμένων utility: Οι φορητές προεπιλογές Tailwind διατηρούνται όταν οι τιμές των δηλώσεων ταιριάζουν με την κλίμακα του framework.
Fallback σε arbitrary τιμές: Οι μη προεπιλεγμένες τιμές γίνονται ρητά arbitrary utility, επομένως τα προσαρμοσμένα pixel, τα χρώματα, οι σκιές και ο χρονισμός είναι εύκολο να επιθεωρηθούν.
Έξοδος ασφαλής για διάταξη: Η απόσταση, το μέγεθος, το display, το grid, το flex, τα περιγράμματα, οι σκιές και η τυπογραφία αντιστοιχίζονται από το αποδιδόμενο δείγμα.
Γρήγορη εξαγωγή κλάσεων: Η έξοδος είναι μια εστιασμένη λίστα κλάσεων Tailwind που είναι έτοιμη να αντιγραφεί σε ένα component, σε έλεγχο token ή σε πέρασμα καθαρισμού.
Καλό για ελέγχους: Χρησιμοποιήστε το για να αντικαταστήσετε μεμονωμένα μπλοκ CSS, πειράματα inline style και πρωτότυπα design system με σαφέστερα utility Tailwind.

Οδηγός μετατροπέα CSS

Μετατρέψτε τις δηλώσεις CSS σε κλάσεις Tailwind

Ο μετατροπέας CSS σε Tailwind μετατρέπει ένα μπλοκ δηλώσεων στις πλησιέστερες φορητές κλάσεις Tailwind. Είναι χρήσιμο για μεμονωμένα design tokens, καθάρισμα inline styles και μεταφορά μικρών CSS snippets στο markup των components.

Το Tailfind εφαρμόζει τις δηλώσεις σε ένα δείγμα στοιχείο πριν από τη μετατροπή, επομένως οι τιμές διάταξης, απόστασης, χρώματος, περιγράμματος, σκιάς, τυπογραφίας και μεγέθους ερμηνεύονται μέσω της ίδιας διαδρομής απόδοσης του προγράμματος περιήγησης που χρησιμοποιείται από την επέκταση.

Χρησιμοποιήστε το για να μετατρέψετε ιδιότητες CSS σε κλάσεις Tailwind, ελέγξτε ποιες τιμές αντιστοιχούν στην προεπιλεγμένη κλίμακα Tailwind και διατηρήστε τις μη προεπιλεγμένες τιμές σαφείς ως arbitrary utility.

Μπορεί να μετατρέψει το CSS σε Tailwind;: Ναί. Επικολλήστε ένα μπλοκ δήλωσης CSS και το Tailfind το εφαρμόζει σε ένα δείγμα στοιχείο πριν εξαγάγει την πλησιέστερη λίστα κλάσεων Tailwind.
Διατηρούνται οι προσαρμοσμένες τιμές;: Το Tailfind αντιστοιχίζει τις τιμές στα προεπιλεγμένα utility του Tailwind όταν είναι δυνατόν και διατηρεί τις μη προεπιλεγμένες τιμές ορατές ως arbitrary utility αντί να τις αποκρύπτει.
Πρέπει να επικολλήσω ένα πλήρες φύλλο στυλ;: Ο μετατροπέας CSS έχει σχεδιαστεί για μπλοκ δηλώσεων. Χρησιμοποιήστε τον μετατροπέα HTML/CSS όταν χρειάζονται επιλογείς, κλάσεις, ένθετη σήμανση ή πληρέστερο φύλλο στυλ.

Παράβλεψη μη αυτόματης μετατροπής

Μετατρέψτε οποιαδήποτε ζωντανή σελίδα
σε καθαρό Tailwind CSS

Το Tailfind φέρνει τον μετατροπέα στο πρόγραμμα περιήγησής σας, ώστε να μπορείτε να καταγράφετε το περιβάλλον εργασίας χρήστη παραγωγής απευθείας από τη σελίδα που προβάλλετε.

Περισσότερες πληροφορίες

Λήψη