Skip to content

Custom line-height values not applied via leading-* classes #254

@tylerbecks

Description

@tylerbecks

Describe the bug
Custom line-height values defined via CSS variables in the Tailwind theme are not being applied to React Native Text components when using NativeWind classes (e.g., leading-md, leading-lg). The fontSize and letterSpacing from the same theme configuration work correctly, but lineHeight is ignored.

Reproduction
https://github.com/tylerbecks/nativewind-line-height-issue

The reproduction includes side-by-side comparisons of the same text with identical typography values:

  • One using NativeWind classes (text-md leading-md tracking-md)
  • One using inline styles (style={{ fontSize: 17, lineHeight: 22, letterSpacing: -0.43 }})

Custom line-height values are defined in the theme using CSS variables and mapped to Tailwind classes via @theme inline.

Expected behavior
When applying className="text-md leading-md tracking-md" to a React Native Text component, all three properties (fontSize, lineHeight, letterSpacing) should be applied correctly, matching the values defined in the CSS variables.

Actual behavior

  • ✅ text-md (fontSize) works correctly
  • ✅ tracking-md (letterSpacing) works correctly
  • ❌ leading-md (lineHeight) does NOT work - line-height is not applied

When the same lineHeight value is applied via inline styles, it works correctly, proving this is specific to NativeWind class application.

Additional context
Environment:

  • NativeWind version: preview
  • React Native version: 0.81.5
  • Expo version: ^54.0.0
  • Tailwind CSS version: ^4.1.13

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No fields configured for Bug.

Projects

Status
Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions