1. Εισαγωγή τιμής
Πληκτρολογήστε έναν αριθμό στο πεδίο εισαγωγής. Μπορείτε να χρησιμοποιήσετε τελεία ή κόμμα.
Tailwind CSS σε px
Αυτός ο μετατροπέας υπολογίζει άμεσα. Εισάγετε μια τιμή και το αποτέλεσμα εμφανίζεται αμέσως.
Loading tool editor...
Πότε χρειάζεστε: Tailwind CSS σε px?
Το Tailwind CSS χρησιμοποιεί κλίμακα αποστάσεων όπου κάθε μονάδα = 0,25 rem = 4 px (με προεπιλεγμένο root 16px). Άρα p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px, w-64 = 16 rem = 256 px.
Αυτός ο μετατροπέας βοηθά τους developers να μεταφράσουν γρήγορα τιμές αποστάσεων Tailwind σε ακριβείς μετρήσεις pixel για debugging, σχεδιαστική παράδοση και τεκμηρίωση.
Το Tailwind έχει επίσης ειδικές τιμές: 0.5 = 2px, 1.5 = 6px, 2.5 = 10px, 3.5 = 14px, και ονομαστικά μεγέθη όπως full = 100%, screen = 100vw.
Όλοι οι υπολογισμοί εκτελούνται τοπικά στον browser σας.
Πώς να χρησιμοποιήσετε τον μετατροπέα;
2. Ανάγνωση αποτελέσματος
Το αποτέλεσμα εμφανίζεται αμέσως στο διπλανό πεδίο – χωρίς κλικ.3. Αντιγραφή ή αντιστροφή
Κάντε κλικ στο Αντιγραφή ή χρησιμοποιήστε το κουμπί Αντιστροφή.
Πότε είναι χρήσιμος αυτός ο μετατροπέας;
Web ανάπτυξη
Πόσα px είναι p-6; Απάντηση: 24 px (1,5 rem).Μετατροπή από Figma
Σχέδιο σε px → αντίστοιχες κλάσεις Tailwind.Σχεδιασμός και μέτρηση
Αντιστοίχιση διάταξης με τον απαιτούμενο γραφιστικό σχεδιασμό.Συνεργασία με σχεδιαστές
Ο σχεδιαστής δίνει px, ο προγραμματιστής χρειάζεται κλάσεις Tailwind.
Τι κάνει αυτόν τον μετατροπέα ξεχωριστό;
Πλήρης ιδιωτικότητα
Όλοι οι υπολογισμοί γίνονται τοπικά στον browser σας. Κανένα δεδομένο δεν στέλνεται σε server.Αποτελέσματα σε πραγματικό χρόνο
Το αποτέλεσμα ενημερώνεται αμέσως καθώς πληκτρολογείτε – χωρίς κουμπί.Αμφίδρομη μετατροπή
Το κουμπί Αντιστροφή σας επιτρέπει να μετατρέψετε και προς τις δύο κατευθύνσεις.Πίνακας αναφοράς
Ένας έτοιμος πίνακας με συχνά μετατρεπόμενες τιμές και περιγραφές.
Πώς λειτουργεί η μετατροπή;
Tailwind spacing = τιμή × 0,25 rem. Με root 16px: spacing × 4 = pixel.
p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px, p-16 = 64px, p-32 = 128px, p-64 = 256px.
Τα μεγέθη γραμματοσειράς χρησιμοποιούν διαφορετικές τιμές: text-sm = 14px, text-base = 16px, text-lg = 18px, text-xl = 20px, text-2xl = 24px.
Πρακτικές συμβουλές
- Spacing: p-1 = 4px, p-2 = 8px, p-3 = 12px, p-4 = 16px, p-6 = 24px, p-8 = 32px.
- Width: w-1 = 4px, w-4 = 16px, w-12 = 48px, w-24 = 96px, w-48 = 192px, w-64 = 256px.
- Breakpoints: sm ≥ 640px, md ≥ 768px, lg ≥ 1024px, xl ≥ 1280px.
- Max-width: max-w-sm = 384px, max-w-md = 448px, max-w-lg = 512px, max-w-xl = 576px.
Tailwind spacing scale
| Tailwind | rem | px (at 16px root) |
|---|---|---|
| 1 | 0.25rem | 4px |
| 4 | 1rem | 16px |
| 8 | 2rem | 32px |
| 16 | 4rem | 64px |
| 64 | 16rem | 256px |
rem
- 1
0.25rem - 4
1rem - 8
2rem - 16
4rem - 64
16rem
px (at 16px root)
- 1
4px - 4
16px - 8
32px - 16
64px - 64
256px
Μετατρέψτε άλλες μονάδες σε px
Εξερευνήστε άλλους μετατροπείς μονάδων
Συχνές ερωτήσεις
Βοηθήστε μας να βελτιώσουμε τα εργαλεία μας
Έχετε μια ιδέα, βρήκατε ένα σφάλμα ή θέλετε να προτείνετε μια λειτουργία; Γράψτε μας – απαντάμε εντός 24 ωρών.