Skip to content

v2.1.1 — Font Size Anti-Pattern Warning

Latest
Latest

Choose a tag to compare

View all tags
@bitjaru bitjaru released this 10 Apr 02:09
· 6 commits to main since this release
v2.1.1
2840a81

Critical: Tailwind v4 Font Size Anti-Patterns

Documented from a real production incident. If you tokenize font sizes as CSS variables, Tailwind v4 will break your UI.

What Went Wrong

  • text-[var(--text-sm)] → Tailwind interprets as color, not font-size → color: 13px (invalid)
  • --text-* CSS variables → conflict with Tailwind v4's internal --text-* namespace
  • Changing --font-size in theme.css → breaks all rem-based spacing (icons, nav, buttons)

What We Added

  • CLAUDE.md: Font Size Anti-Pattern section with 3 ✗ and 1 ✓ pattern
  • DESIGN-LANGUAGE.md: CRITICAL warning after typography rules
  • Prohibited Practices: explicit rules against font-size tokenization
  • /ss-lint: New check that detects text-[var(-- pattern automatically

The Rule

✓ ALWAYS: text-[36px], text-[18px], text-[13px]  (explicit px)
✗ NEVER:  text-[var(--text-sm)]                    (CSS variable)
✗ NEVER:  --text-sm: 13px in theme.css             (Tailwind conflict)
Assets 2
Loading