Bidirectional conversion between vanilla CSS and Tailwind CSS utility classes
| 0 | 0px |
| px | 1px |
| 0.5 | 2px |
| 1 | 4px |
| 1.5 | 6px |
| 2 | 8px |
| 2.5 | 10px |
| 3 | 12px |
| 3.5 | 14px |
| 4 | 16px |
| 5 | 20px |
| 6 | 24px |
| 7 | 28px |
| 8 | 32px |
| 9 | 36px |
| 10 | 40px |
| 11 | 44px |
| 12 | 48px |
| 14 | 56px |
| 16 | 64px |
| 20 | 80px |
| 24 | 96px |
| 28 | 112px |
| 32 | 128px |
| 36 | 144px |
| 40 | 160px |
| 44 | 176px |
| 48 | 192px |
| 52 | 208px |
| 56 | 224px |
| 60 | 240px |
| 64 | 256px |
| 72 | 288px |
| 80 | 320px |
| 96 | 384px |
| text-xs | 12px |
| text-sm | 14px |
| text-base | 16px |
| text-lg | 18px |
| text-xl | 20px |
| text-2xl | 24px |
| text-3xl | 30px |
| text-4xl | 36px |
| text-5xl | 48px |
| text-6xl | 60px |
| text-7xl | 72px |
| text-8xl | 96px |
| text-9xl | 128px |
| rounded-none | 0px |
| rounded-sm | 2px |
| rounded | 4px |
| rounded-md | 6px |
| rounded-lg | 8px |
| rounded-xl | 12px |
| rounded-2xl | 16px |
| rounded-3xl | 24px |
| rounded-full | 9999px |
| white / black | #fff / #000 |
| slate-{50-950} | slate tones |
| gray-{50-950} | gray tones |
| red-{50-950} | red tones |
| orange-{50-950} | orange tones |
| yellow-{50-950} | yellow tones |
| green-{50-950} | green tones |
| blue-{50-950} | blue tones |
| indigo-{50-950} | indigo tones |
| purple-{50-950} | purple tones |
| pink-{50-950} | pink tones |
| opacity-0 | 0 |
| opacity-5 | 0.05 |
| opacity-10 | 0.1 |
| opacity-20 | 0.2 |
| opacity-25 | 0.25 |
| opacity-30 | 0.3 |
| opacity-40 | 0.4 |
| opacity-50 | 0.5 |
| opacity-60 | 0.6 |
| opacity-70 | 0.7 |
| opacity-75 | 0.75 |
| opacity-80 | 0.8 |
| opacity-90 | 0.9 |
| opacity-95 | 0.95 |
| opacity-100 | 1 |
| z-0 | 0 |
| z-10 | 10 |
| z-20 | 20 |
| z-30 | 30 |
| z-40 | 40 |
| z-50 | 50 |
| z-auto | auto |