rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style v2 with tailwind-variants/lite

Browse Source 
The numbered v2 token scales (text-1…9, rounded-1…6, shadow-1…6)
share a prefix with the color/utility namespaces, and tailwind-merge
(which tailwind-variants runs by default) cannot tell a numeric
text-3 from a color step, so it silently dropped the size whenever a
text-<color> was present. Switch the v2 kit to the merge-free
tailwind-variants/lite entrypoint (added in v3): upgrade
tailwind-variants to ^3.2.2, import tv/VariantProps from
tailwind-variants/lite in the typography primitives, and drop the
per-call twMerge:false.

The legacy v1 kit stays on tailwind-variants (merge intact). Document
the rationale in ui.md and add a packages/ui/src/v2 ESLint guard that
forbids tailwind-variants, tailwind-merge, and clsx.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-24 12:31:27 +02:00
parent 863e41c47f
commit b374bc5211
7 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/package.json
View File

@@ -42,7 +42,7 @@
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0",
"tailwind-variants": "^1.0.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.3.1",
"tw-animate-css": "^1.3.0",
"zustand": "^5.0.4"

2
packages/ui/src/v2/typography/Text.tsx
View File

@@ -13,7 +13,7 @@
// PERFORMANCE OF THIS SOFTWARE.
import type { ComponentProps } from "react";
import type { VariantProps } from "tailwind-variants";
import type { VariantProps } from "tailwind-variants/lite";
import { text } from "./variants";

2
packages/ui/src/v2/typography/TextSkeleton.tsx
View File

@@ -13,7 +13,7 @@
// PERFORMANCE OF THIS SOFTWARE.
import type { ComponentProps } from "react";
import type { VariantProps } from "tailwind-variants";
import type { VariantProps } from "tailwind-variants/lite";
import { textSkeleton } from "./variants";

2
packages/ui/src/v2/typography/variants.ts
View File

@@ -12,7 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { tv } from "tailwind-variants";
import { tv } from "tailwind-variants/lite";
// Numbered type scale (text-1 … text-9). Each utility carries its paired
// font-size, line-height, and letter-spacing from the v2 theme. Shared between