1. Érték megadása
Írjon be egy számot a beviteli mezőbe. Használhat pontot vagy vesszőt tizedesjegyként.
Tailwind CSS px-re
Ez az átváltó azonnal átszámol. Adjon meg egy értéket és az eredmény azonnal megjelenik.
Loading tool editor...
Mikor kell használni: Tailwind CSS px-re?
A Tailwind CSS egy távolsági skálát használ, ahol minden egység = 0,25 rem = 4 px (alapértelmezett 16px root mellett). Tehát p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px, w-64 = 16 rem = 256 px.
Ez az átváltó segít a fejlesztőknek gyorsan lefordítani a Tailwind távolságértékeket pontos pixel mérésekre hibakereséshez, design átadáshoz és dokumentációhoz.
A Tailwind speciális értékekkel is rendelkezik: 0.5 = 2px, 1.5 = 6px, 2.5 = 10px, 3.5 = 14px, és elnevezett méretek mint full = 100%, screen = 100vw.
Minden számítás helyben, a böngészőjében történik.
Hogyan használja az átváltót?
2. Eredmény leolvasása
Az átváltás eredménye azonnal megjelenik a mellette lévő mezőben – kattintás nélkül.3. Másolás vagy megfordítás
Kattintson az Eredmény másolása gombra vagy használja a Megfordítás gombot.
Mikor hasznos ez az átváltó?
Webfejlesztés
Hány px a p-6? Válasz: 24 px (1,5 rem).Figma konverzió
Terv px-ben → megfelelő Tailwind osztályok.Tervezés és mérés
Az elrendezés illesztése a szükséges grafikai tervhez.Együttműködés designerekkel
A designer px-t ad meg, a fejlesztőnek Tailwind osztályok kellenek.
Mi teszi különlegessé ezt az átváltót?
Teljes adatvédelem
Minden számítás helyben, a böngészőjében történik. Semmilyen adat nem kerül szerverre.Azonnali eredmények
Az eredmény azonnal frissül gépelés közben – nem kell semmilyen gombra kattintani.Kétirányú átváltás
A Megfordítás gomb segítségével egy kattintással válthat irányt.Referencia táblázat
Kész táblázat gyakran átváltott értékekkel és kontextuális leírásokkal.
Hogyan működik az átváltás?
Tailwind spacing = érték × 0,25 rem. 16px root esetén: spacing × 4 = pixel.
p-1 = 4px, p-2 = 8px, p-4 = 16px, p-8 = 32px, p-16 = 64px, p-32 = 128px, p-64 = 256px.
A betűméretek más értékeket használnak: text-sm = 14px, text-base = 16px, text-lg = 18px, text-xl = 20px, text-2xl = 24px.
Gyakorlati tippek
- 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
Más egységek átváltása px egységre
További mértékegység-átváltók
Gyakran ismételt kérdések
Segítsen javítani eszközeinket
Van ötlete, hibát talált vagy funkciót szeretne javasolni? Írjon nekünk – 24 órán belül válaszolunk.