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

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

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

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

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

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

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

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

CSS

Tailwind v4

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

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

Τέλειος μετατροπέας pixel Tailwind

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

Δήλωση-πρώτη μετατροπή: Επικολλήστε ένα μπλοκ δήλωσης CSS και το Tailfind το εφαρμόζει σε ένα δείγμα στοιχείο πριν μετατρέψει το αποτέλεσμα που αποδίδεται σε επαναχρησιμοποιήσιμες κλάσεις Tailwind.
Προεπιλεγμένη προτίμηση βοηθητικού προγράμματος: Οι προεπιλογές φορητού Tailwind διατηρούνται όταν οι τιμές των δηλώσεων ταιριάζουν με την κλίμακα πλαισίου.
Επιστροφή αυθαίρετης αξίας: Οι μη προεπιλεγμένες τιμές γίνονται ρητά αυθαίρετα βοηθητικά προγράμματα, επομένως τα προσαρμοσμένα pixel, τα χρώματα, οι σκιές και ο χρονισμός είναι εύκολο να επιθεωρηθούν.
Έξοδος ασφαλής για διάταξη: Η απόσταση, το μέγεθος, η εμφάνιση, το πλέγμα, η ευκαμψία, τα περιγράμματα, οι σκιές και η τυπογραφία αντιστοιχίζονται από το δείγμα που αποδίδεται.
Γρήγορη εξαγωγή κατηγορίας: Η έξοδος είναι μια εστιασμένη λίστα κλάσεων Tailwind που είναι έτοιμη να αντιγραφεί σε ένα στοιχείο, ένα διακριτικό ακίδα ή ένα πάσο καθαρισμού.
Καλό για ελέγχους: Χρησιμοποιήστε το για να αντικαταστήσετε μεμονωμένα μπλοκ CSS, πειράματα ενσωματωμένου στυλ και πρωτότυπα συστήματος σχεδίασης με σαφέστερα βοηθητικά προγράμματα Tailwind.

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

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

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

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

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

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

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

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

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

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

Λήψη