Arbitrary Value Support
Any Tailwind arbitrary value — `w-[320px]`, `top-[calc(50%+2rem)]`, `text-[#ff6b00]` — is parsed and applied exactly in Figma.
How it works
Tailwind's arbitrary value syntax (`[...]`) is fully supported. The parser extracts values from brackets, handles `px`, `rem` (converted at 1rem = 16px), and `calc()` expressions with `+` and `-` operators. This means arbitrary widths, heights, positions, colours, and font sizes all work out of the box — no configuration required. The same parsing handles responsive arbitrary values like `lg:w-[960px]` and negative values like `-top-[20px]`.
Usage
- 1
Use arbitrary Tailwind values freely: `w-[320px]`, `h-[calc(100%-4rem)]`, `text-[#1a1a2e]`.
- 2
rem values are converted to px at 16px base: `w-[2rem]` → 32px in Figma.
- 3
`calc()` expressions with + and − are evaluated before applying to the Figma frame.
- 4
Arbitrary colours are resolved to RGB — no need to add them to your Tailwind config first.
- 5
Responsive arbitrary values (`lg:w-[960px]`) are applied at the correct breakpoint frame.