Tathagata Sarkar

Designer

Mumbai, India

Contact

← Back to Work

CSS Toolkit

Six CSS converters, on the web and in Figma.

I kept doing the same small sums by hand: pixels to rem, viewport maths, a CSS snippet turned into Tailwind classes or inline styles for an email. So I built the tools I wanted. Type into either field and the other updates; in Figma, the plugin fills them in from the layer you select. Everything runs in your browser, and nothing you paste is uploaded.

Where
Web app and Figma plugin
Converts
px, rem, em, vw, vh, inline styles, Tailwind
Price
Free
Open CSS Toolkit Get the Figma plugin
CSS Toolkit's PX / REM tab: 16 pixels beside 1.000 rem on a yellow panel, with the root font size and decimal places below.

Inside the app

The CSS / Tailwind tab: a .card rule on the left, its Tailwind v4 classes on the right.
CSS to Tailwind. Paste rules, get Tailwind v4 classes.
The CSS / Inline tab: HTML with a style block on the left, the same HTML with inline styles on the right.
CSS to Inline. A style block moved into the tags, for email.
All tools: six cards, PX to REM, REM to EM, PX to VW, PX to VH, CSS to Inline and CSS to Tailwind.
All tools. Every converter in one place, each in its own colour.
The Figma plugin reading a selected heading: 540 by 58, font 48px, above the converter tabs.
In Figma. The plugin reads the layer you select.

Let's talk.

Write to me Download CV