Effects
box-shadow to Tailwind
Shadows are named presets, so an exact match depends on your CSS using the same values Tailwind ships — a custom shadow becomes arbitrary.The 22 mappings below are read straight out of Tailwind v4.3.3, not maintained by hand, so this is what the converter will actually produce for box-shadow.
box-shadow values and their classes
| CSS | Tailwind |
|---|---|
| box-shadow: 0 0 0 0 currentcolor; | ring-0 |
| box-shadow: 0 0 0 1px currentcolor; | ring |
| box-shadow: 0 0 0 2px currentcolor; | ring-2 |
| box-shadow: 0 0 0 4px currentcolor; | ring-4 |
| box-shadow: 0 0 0 8px currentcolor; | ring-8 |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | shadow-lg |
| box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.05); | shadow-2xs |
| box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); | shadow-xs |
| box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | shadow |
| box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | shadow-xl |
| box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); | shadow-2xl |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | shadow-md |
| box-shadow: inset 0 0 0 0 #0000; | inset-shadow-none |
| box-shadow: inset 0 0 0 0 currentcolor; | inset-ring-0 |
| box-shadow: inset 0 0 0 1px currentcolor; | inset-ring |
| box-shadow: inset 0 0 0 2px currentcolor; | inset-ring-2 |
| box-shadow: inset 0 0 0 4px currentcolor; | inset-ring-4 |
| box-shadow: inset 0 0 0 8px currentcolor; | inset-ring-8 |
| box-shadow: inset 0 1px 0 0 rgb(0 0 0 / 0.05); | inset-shadow-2xs |
| box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 0.05); | inset-shadow-xs |
| box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); | shadow-inner |
| box-shadow: none; | shadow-none |
Values that are not on the scale
Anything without a named class is written as an arbitrary value in square brackets. The converter falls back to this rather than rounding your CSS to the nearest class, because silently changing a value is worse than an ugly class name.
shadow-[your value]Other effects properties
Converting a whole stylesheet?
Paste it into the converter and get every rule at once, shorthands expanded, media queries turned into breakpoint variants, and the parts that have no Tailwind equivalent flagged rather than dropped.
Open the converter