tailwind-to-stylex

Installation
SKILL.md

Tailwind v4 → StyleX migration

Migrate a Tailwind CSS v4 codebase to StyleX so the site renders pixel-identical while gaining typed, compiler-checked styles. Work the seven phases in order; Tailwind and StyleX coexist until the final teardown. Verification — screenshots plus computed styles — decides whether work passed, never judgment.

Non-negotiables (every phase)

  • Ground truth: resolve every utility from the project's own compiled Tailwind CSS captured in P0, never from memorized tables. Models hallucinate v3 values under v4 (ring width/color, shadow scale renames, oklch palette, color-mix() opacity modifiers). A class missing from the ground-truth CSS gets rendered once and read via computed style, then flagged in the report.
  • Literal-then-lift: P4 translates values literally so fidelity is checkable; P5 lifts to idiomatic StyleX afterward. Lift only in P5.
  • Escape hatch: exactly three sanctioned plain-CSS homes — reset.css (P3), the token bridge variables (P2), and markdown.css for subtrees StyleX cannot style (rendered markdown/prose, third-party DOM, container queries). Each consumes the defineVars CSS variables. In Astro, scoped <style> blocks are a fourth first-class home for .astro templates. Plain CSS anywhere else is a defect to fix.
  • Diff-clean gate: a unit of work is done only when verification reports no visual or computed-style difference, or every difference is explained in the report and accepted. Never commit past an unexplained diff.

P0 — Baseline

Load references/verification.md now.

Installs
6
Repository
zkmake/skills
GitHub Stars
2
First Seen
Aug 25, 2026