Px to Tailwind Plus

Type p-16px, get p-4. Paste p-[20px] from a design handoff, get p-5. Works with Tailwind v4 dynamic spacing and Tailwind v3 classic scale, in VS Code and Cursor.

What it does

It converts as you type, on save, via a quick fix, or across a whole file with a command. Off-scale values fall back to an arbitrary value (w-50.5px → w-[50.5px]) so nothing is ever silently rounded.

Where it applies

Only inside real class context — never in comments, plain strings or unrelated code:

• class, className, :class, v-bind:class, Svelte class:
• class utilities: clsx, cn, cx, cva, classnames, tw, twMerge, twJoin (configurable), including className={clsx("…")}
• Tailwind @apply rules in CSS/SCSS/Less/PostCSS

<div className="p-16px" />        // → p-4
const label = "p-16px";           // untouched — not class context
// p-16px in a comment            // untouched
<div id="p-16px" />               // untouched

Install

VS Code — search “Px to Tailwind Plus”, or:

ext install maksym-vasianin.px-to-tailwind-plus

Cursor — installs from Open VSX. Search “Px to Tailwind Plus”, or grab the .vsix from the Open VSX page and run Extensions: Install from VSIX….

Cursor mirrors Open VSX on its own schedule and can sit a release behind. If you need the newest version immediately, install the .vsix directly.

Modes

Set pxToTwPlus.mode:

v4 (default) — dynamic spacing, value = px / spacingBasePx. If the value lands on the allowed step it becomes a bare class, otherwise an arbitrary value. Quarter-step classes render as calc(var(--spacing) * N) and are valid v4.

v3 — the classic fixed scale; off-scale values become arbitrary.

Units

px and rem are both understood; rem resolves against the 16px root. A rem value is only rewritten when it lands on a scale token, so it is never churned into pixels:

em is never converted. It resolves against the parent font size, which cannot be known from the text, so any value would be a guess. %, vw and calc() are left alone for the same reason.

Coverage

Padding, margin, gap, w/h/size, min-*, max-*, inset, translate-*, space-*, scroll-m*, scroll-p*, basis, indent, leading, plus borders, ring, outline, stroke, font-size, border-radius and tracking — with negatives, variant chains and !important.

Custom themes

Your own design tokens win over the built-in scales.

v4 — --spacing-*, --text-* and --radius-* in a CSS @theme block, plus a custom --spacing base:

@theme {
  --spacing: 4px;
  --spacing-gutter: 20px; /* p-20px       → p-gutter       */
  --text-hero: 58px;      /* text-58px    → text-hero      */
  --radius-card: 14px;    /* rounded-14px → rounded-card   */
}

v3 — theme.spacing, theme.fontSize and theme.borderRadius (and their extend counterparts) from tailwind.config.{js,cjs,mjs,ts}. .js/.cjs configs are evaluated in an isolated child process, so no config code runs in the editor; other formats are parsed without executing anything.

Settings

Languages: html, javascript, javascriptreact, typescript, typescriptreact, vue, svelte, astro, css, scss, less, postcss. In the CSS family only @apply rules are touched.

Excluding files

pxToTwPlus.ignoreFiles takes glob patterns — the same syntax as .gitignore and files.exclude. A matching file is skipped by every feature: no live conversion, no convert-on-save, no diagnostics. Empty by default.

{
  "pxToTwPlus.ignoreFiles": [
    "**/*.{test,spec}.tsx", // test files anywhere
    "**/__tests__/**",      // whole test folders
    "/src/legacy/**",       // anchored at the workspace root
    "**/dist/**"            // build output
  ]
}

Patterns match the workspace-relative path; a leading / anchors to the root. Separators are normalised, so one pattern works on every OS. An invalid pattern is reported in the output channel and skipped — it never disables the others.

Snapping off-scale values

Design handoffs drift: p-17px where the scale has 16px. By default that just becomes p-[17px] — correct, but arbitrary forever. Set pxToTwPlus.snapToNearestPx to a pixel budget and the nearest scale token is offered as a quick fix:

{ "pxToTwPlus.snapToNearestPx": 2 }

p-17px      →  blue hint: "p-17px → p-4 (nearest scale value)"
text-21px   →  Snap to nearest: text-xl
p-[17px]    →  Snap to nearest: p-4
w-137px     →  nothing — 9px away, outside the budget

Snapping changes the rendered result, so it is never applied on its own: not while typing, not on save, not by Convert File. You pick it from the quick-fix menu, one value at a time. Anything you pinned with arbitraryFor is left alone, and values already on the scale are never touched.

Commands

Contributing

See CONTRIBUTING.md.

License

MIT