{"_id":"@birdapi/velinstyle-tailwind","name":"@birdapi/velinstyle-tailwind","dist-tags":{"latest":"1.4.0"},"versions":{"1.4.0":{"name":"@birdapi/velinstyle-tailwind","version":"1.4.0","description":"Optional Tailwind → VelinStyle compatibility CSS layer for migrations (not a second design system)","type":"module","main":"./src/index.css","exports":{".":"./src/index.css","./css":"./src/index.css","./spacing":"./src/spacing.css","./sizing":"./src/sizing.css","./flex-grid":"./src/flex-grid.css","./misc":"./src/misc.css","./opacity-color":"./src/opacity-color.css","./opacity-color-tier2":"./src/opacity-color-tier2.css","./static-scale":"./src/static-scale.css","./medium-static":"./src/medium-static.css","./final-static":"./src/final-static.css","./responsive":"./src/responsive.css"},"repository":{"type":"git","url":"git+https://github.com/SkyliteDesign/velinstyle.git","directory":"packages/velinstyle-tailwind"},"homepage":"https://velinstyle.info/docs/migration.html","author":{"name":"SkyliteDesign"},"license":"MIT","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"keywords":["velinstyle","tailwind","migration","compatibility","css"],"engines":{"node":">=18"},"peerDependencies":{"@birdapi/velinstyle":"1.4.0"},"peerDependenciesMeta":{"@birdapi/velinstyle":{"optional":true}},"gitHead":"0b4fe40b8033088dfc8fde9ce602cf9b4bd50ff8","_id":"@birdapi/velinstyle-tailwind@1.4.0","bugs":{"url":"https://github.com/SkyliteDesign/velinstyle/issues"},"_nodeVersion":"22.20.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-YCjNkrzAISY762oL9kfyQo8WmLrWXig64uhjsbIHYLdGJ7uLC5YuJx+0JTC1dH+SdvtYJxy9IUK/ySTc1v+YMg==","shasum":"2ec7f02ca9d4908319e0d3141c9c8a1865ed5e31","tarball":"https://registry.npmjs.org/@birdapi/velinstyle-tailwind/-/velinstyle-tailwind-1.4.0.tgz","fileCount":13,"unpackedSize":246325,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB9WYmgUPMfu4fByrqDhE5gdRy5SnYGhe5oRHW0w5lfcAiEA6LkCBA48K/kRb2goiB2yY+TPdHa6+4jLnKwFh8lje8o="}]},"_npmUser":{"name":"skylitedesign","email":"mail@skylite.design"},"directories":{},"maintainers":[{"name":"skylitedesign","email":"mail@skylite.design"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/velinstyle-tailwind_1.4.0_1788362197740_0.630073860348829"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T15:16:37.350Z","1.4.0":"2026-09-02T15:16:37.928Z","modified":"2026-09-02T15:16:38.359Z"},"maintainers":[{"name":"skylitedesign","email":"mail@skylite.design"}],"description":"Optional Tailwind → VelinStyle compatibility CSS layer for migrations (not a second design system)","homepage":"https://velinstyle.info/docs/migration.html","keywords":["velinstyle","tailwind","migration","compatibility","css"],"repository":{"type":"git","url":"git+https://github.com/SkyliteDesign/velinstyle.git","directory":"packages/velinstyle-tailwind"},"author":{"name":"SkyliteDesign"},"bugs":{"url":"https://github.com/SkyliteDesign/velinstyle/issues"},"license":"MIT","readme":"# `@birdapi/velinstyle-tailwind`\r\n\r\nOptional **Compatibility Layer** for migrating Tailwind CSS projects to VelinStyle.\r\n\r\n**Compatibility ≠ Design System.**  \r\nThis package is **not** a second design system, **not** full Tailwind parity, and **not** a replacement for Core. Coverage is directional — there is **no** guaranteed 1:1 visual or class compatibility with Tailwind.\r\n\r\n| Package | Role |\r\n|---------|------|\r\n| `@birdapi/velinstyle` | Core — tokens, utilities, components, runtime, CLI |\r\n| `@birdapi/velinstyle-tailwind` | Optional migration / Tailwind-near CSS (opt-in) |\r\n\r\n## Opt-in usage\r\n\r\n```bash\r\nnpm install @birdapi/velinstyle @birdapi/velinstyle-tailwind\r\n```\r\n\r\n```css\r\n@import '@birdapi/velinstyle';\r\n@import '@birdapi/velinstyle-tailwind';\r\n```\r\n\r\nImport **Core first** so Compat can reuse Core tokens / theme vars when present.\r\n\r\nClass names use the `velin-*` prefix (e.g. Tailwind `px-4` → `velin-px-4`). The package is the compatibility namespace — there is no `velin-tw-*` prefix.\r\n\r\n## CLI\r\n\r\n```bash\r\n# Core-only\r\nvelinstyle migrate tailwind <project>\r\n\r\n# Core + Compat (this package)\r\nvelinstyle migrate tailwind <project> --compat tailwind\r\n\r\n# Core + Compat + opt-in palette→role heuristic (map-only; not CSS from this package)\r\nvelinstyle migrate tailwind <project> --compat tailwind --heuristic palette-roles\r\n```\r\n\r\n- **Compat is optional.** `--compat tailwind` loads this package’s catalog on top of Core. Without the flag, migrate stays Core-only (Compat classes are never applied silently).\r\n- **Heuristic is optional.** Requires an explicit `--heuristic palette-roles` flag.\r\n- **Dry-run is default.** Unresolved tokens are never auto-replaced. Tailwind deps are never auto-removed.\r\n\r\nReport field `compatibilityPackage`: `used` | `suggested` | `absent`.\r\n\r\n## MVP utilities (layout / spacing)\r\n\r\n| Sheet | Classes |\r\n|-------|---------|\r\n| `spacing.css` | `velin-px-*`, `velin-pl-*`, `velin-pr-*`, `velin-mx-*`, `velin-ml-*`, `velin-mr-*`, `velin-space-x-*`, `velin-space-y-*` |\r\n| `sizing.css` | numeric `velin-w-*`, `velin-h-*` (not Core keywords like `velin-w-full`) |\r\n| `flex-grid.css` | `velin-flex-1`, `velin-flex-none`, `velin-grow`, `velin-shrink`, `velin-shrink-0`, `velin-grid-cols-1`…`12` |\r\n| `misc.css` | `velin-z-0`…`50`, `velin-rounded-md` |\r\n\r\nScale (no arbitrary values): spacing `0 1 2 3 4 5 6 8 10 12 16 20 24 32`; sizing adds `px` + extra rem stops.\r\n\r\n`velin-grid-cols-*` is CSS Grid (`grid-template-columns`) — **not** Core `velin-col-*`.\r\n\r\n## Static-scale gaps (Phase 7E)\r\n\r\nSheet: `static-scale.css` (generated).\r\n\r\n| Tailwind | Compat | Notes |\r\n|----------|--------|-------|\r\n| `pt-8` | `velin-pt-8` | physical `padding-top` (alias `pbs` falls through when missing) |\r\n| `pb-1` | `velin-pb-1` | only keys **not** in Core (Core `pb-*` = logical `padding-block`) |\r\n| `py-5` | `velin-py-5` | physical top+bottom; Core collisions skipped |\r\n| `mt-12` / `mb-10` / `my-16` | `velin-mt-*` / `velin-mb-*` / `velin-my-*` | Compat scale |\r\n| `gap-12` | `velin-gap-12` | keys beyond Core `gap-0…8` |\r\n| `opacity-5/10/70` | `velin-opacity-*` | extras only |\r\n| `rounded-3xl` | `velin-rounded-3xl` | uses `--velin-radius-2xl` (1.5rem) |\r\n| `shadow-md` | `velin-shadow-md` | uses existing `--velin-shadow-md` token |\r\n\r\nOut of scale (not generated): half-steps, `pl-7`, `pt-36` / `pb-48`.\r\n\r\n## Medium-static (Phase 7F)\r\n\r\nSheet: `medium-static.css` (generated). Selective deterministic utilities only.\r\n\r\n| Area | Examples |\r\n|------|----------|\r\n| Typography | `text-8xl`, `italic`, `font-black`, `leading-7`, `tracking-tighter`/`widest`, `antialiased` |\r\n| Sizing | `max-w-3xl…7xl`, `min-w-0`, `size-2/3/4`, `size-full` |\r\n| Insets | `top-4`, `left-0`, `-bottom-6` → `velin--bottom-6` |\r\n| Border | `border-t/b/l/r/x/y`, `border-dashed`, `border-l-2/4` |\r\n| Cursor | `cursor-*-resize`; Core alias `pointer-events-none` → `velin-pointer-none` |\r\n| Misc | `list-*`, `mx-auto`, `gap-x-8`, `gap-y-2`, `col-span-2`, `outline-none`, `-z-10` |\r\n\r\n**Not included:** theme roles (`bg-card`), half-steps, fractions (`left-1/2`), motion/gradients direction, `rounded-tl-sm` (see Phase 7G).\r\n\r\n## Final-static (Phase 7G)\r\n\r\nSheet: `final-static.css` (generated). Last safe static leftovers only.\r\n\r\n| Tailwind | Compat |\r\n|----------|--------|\r\n| `scroll-m-20` | `velin-scroll-m-20` |\r\n| `fill-current` | `velin-fill-current` |\r\n| `auto-rows-max` | `velin-auto-rows-max` |\r\n| `bg-clip-text` | `velin-bg-clip-text` |\r\n| `rounded-r-lg` / `rounded-tl-sm` | corner radii via Core tokens |\r\n| `from-white` / `from-transparent` / `to-black` / `to-transparent` | gradient stop vars (not direction) |\r\n| `pl-7` / `pt-36` / `pb-48` | pilot rem keys |\r\n| `border-bottom` | alias → `velin-border-b` |\r\n\r\n## Slash-opacity (Tier-1)\r\n\r\nSheet: `opacity-color.css` (generated).\r\n\r\n| Tailwind | Compat |\r\n|----------|--------|\r\n| `bg-emerald-500/10` | `velin-bg-emerald-500-10` |\r\n| `border-emerald-500/30` | `velin-border-emerald-500-30` |\r\n| `text-emerald-400/80` | `velin-text-emerald-400-80` |\r\n\r\n- Slash `/` becomes `-` in the class name.\r\n- Implementation: dedicated classes + `color-mix(in oklab, … N%, transparent)` inside this package only.\r\n- Palette colors use Compat-local `--velin-tw-*` tokens (only hues/shades needed by the Tier-1 list).\r\n- Theme stems (`muted`, `card`, `background`, …) use host CSS vars (`--muted`, …) — **not** remapped to Velin semantic roles.\r\n\r\n### Tier-1 scope\r\n\r\n- Plain static `bg-*` / `text-*` / `border-*` with slash opacity\r\n- Generated from the Phase-6A pilot inventory (124 classes in the current cut)\r\n\r\n### Explicitly out of scope\r\n\r\n- `hover:` / `focus:` / `disabled:` / `group-hover:`\r\n- `dark:`\r\n- `2xl:` (no Core `2xl` breakpoint)\r\n- Arbitrary values (`bg-[#…]/10`, `md:w-[…]`)\r\n- `cn()` / dynamic `className`\r\n- Palette → semantic role heuristics (opt-in CLI `--heuristic palette-roles`, map-only — not this CSS package)\r\n- Any Core CSS for Tailwind parity\r\n\r\n## Slash-opacity (Tier-2)\r\n\r\nSheet: `opacity-color-tier2.css` (generated).\r\n\r\n| Tailwind | Compat | Technique |\r\n|----------|--------|-----------|\r\n| `from-emerald-500/10` | `velin-from-emerald-500-10` | `--tw-gradient-from` + stops wiring |\r\n| `via-blue-500/50` | `velin-via-blue-500-50` | `--tw-gradient-via` + via-stops |\r\n| `to-cyan-500/10` | `velin-to-cyan-500-10` | `--tw-gradient-to` |\r\n| `shadow-emerald-500/20` | `velin-shadow-emerald-500-20` | `--tw-shadow-color` only |\r\n| `ring-ring/50` | `velin-ring-ring-50` | `--tw-ring-color` |\r\n| `outline-ring/50` | `velin-outline-ring-50` | `outline-color` |\r\n| `divide-border/50` | `velin-divide-border-50` | sibling `border-color` |\r\n\r\nGradients keep multi-stop semantics (no collapse to a single background). Shadow is a **color modifier**, not a full `box-shadow` utility.\r\n\r\n### Tier-2 out of scope\r\n\r\n- State variants (`hover:shadow-…`, `focus-visible:ring-…`)\r\n- Arbitrary colors\r\n- Inventing full shadow stacks or fake 1:1 visual claims\r\n\r\n## Responsive (BP allowlist)\r\n\r\nSheet: `responsive.css` (generated).\r\n\r\nWraps **existing** Compat bases (and a few Core extras) as:\r\n\r\n`md:px-4` → `velin-md-px-4`\r\n\r\nBreakpoints match Core: `sm` 36rem · `md` 48rem · `lg` 62rem · `xl` 80rem. **No `2xl`.**\r\n\r\nRequires `--compat tailwind` so the Compat catalog is loaded. Without Compat, responsive Compat classes stay unresolved.\r\n\r\n## Anti-duplicate\r\n\r\nCompat must not define a selector already present in the Core catalog (`assertNoCatalogCollisions`).\r\n\r\n## Docs\r\n\r\nADR 0020 · `PILOT_COMPAT_ARCHITECTURE.md` · `PILOT_SLASH_OPACITY_ANALYSIS.md`\r\n","readmeFilename":"README.md","_rev":"1-d5350b9fb5a06c1940fb724674f7861c"}