Skip to content

fix: apply effective rem to calc function using variables#345

Open
Jin-Byun wants to merge 1 commit into
nativewind:mainfrom
Jin-Byun:fix/tailwind-v4-rem-variables-in-calc
Open

fix: apply effective rem to calc function using variables#345
Jin-Byun wants to merge 1 commit into
nativewind:mainfrom
Jin-Byun:fix/tailwind-v4-rem-variables-in-calc

Conversation

@Jin-Byun

Copy link
Copy Markdown

Summary

Fix for a bug: Custom effectiveRem value not being applied in Tailwind V4.

  • Tailwind V4 uses calc function with rem-based variables (e.g --spacing: 0.25rem) for dynamic values (e.g. w-1 px-17 h-1.5) and more. (e.g. .rounded-4xl { border-radius: calc(var(--radius-xl) * 4})
  • Length visitor in the compiler cannot update calc function with rem-based variable directly into px value.
  • Update in the Declaration visitor using remToPx transformation similar to Length visitor catches and convert rem-based variables to px-based variables.

Test Plan

  • Added test to check whether the effectiveRem set by :root { font-size: 16px; } is applied to border-width: calc(var(--spacing) * 4)
  • Tests Passed, typechecked and linted.

@danstepanov

Copy link
Copy Markdown
Member

Preemptive triage note for the 5.0 release, @marklawlor makes the final call.

The bug is real and blocker level, rem inside variable values bypasses the first pass conversion so calc(var(--spacing) * 4) resolves against the default 14. But #336 fixes the same symptom more completely with the inlineRem write back plus the Metro options propagation fix, while this patch misses rem nested inside function tokens. I'd land #336 and close this one, ideally carrying its compiler test over.

@danstepanov danstepanov requested a review from marklawlor July 9, 2026 02:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants