When using Tailwind CSS in NativeScript, you may use various Tailwind CSS font sizes, such as text-lg and text-3xl. However, Tailwind CSS applies line height au
When using Tailwind CSS in NativeScript, you may use various Tailwind CSS font sizes, such as text-lg and text-3xl.
However, Tailwind CSS applies line height automatically.
https://tailwindcss.com/docs/font-size
Font Size
Utilities for controlling the font size of an element.
text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
text-3xl font-size: 1.875rem; /* 30px */
line-height: 2.25rem; /* 36px */
text-4xl font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
text-5xl font-size: 3rem; /* 48px */
line-height: 1;
text-6xl font-size: 3.75rem; /* 60px */
line-height: 1;
text-7xl font-size: 4.5rem; /* 72px */
line-height: 1;
text-8xl font-size: 6rem; /* 96px */
line-height: 1;
text-9xl font-size: 8rem; /* 128px */
line-height: 1;On iOS, this lineHeight option causes layout issues.
So the author above is describing the same problem. The author said that the line height should differ from the font size by exactly 2 px.
So I minimized the problem by modifying tailwind.config.js.
theme: {
extend: {
fontSize: {
'xs': ['0.75rem', { lineHeight: '0.875rem' }], // 12px font-size, 14px line-height
'sm': ['0.875rem', { lineHeight: '1rem' }], // 14px font-size, 16px line-height
'base': ['1rem', { lineHeight: '1.125rem' }], // 16px font-size, 18px line-height
'lg': ['1.125rem', { lineHeight: '1.25rem' }], // 18px font-size, 20px line-height
'xl': ['1.25rem', { lineHeight: '1.375rem' }], // 20px font-size, 22px line-height
'2xl': ['1.5rem', { lineHeight: '1.625rem' }], // 24px font-size, 26px line-height
'3xl': ['1.875rem', { lineHeight: '2rem' }], // 30px font-size, 32px line-height
'4xl': ['2.25rem', { lineHeight: '2.375rem' }], // 36px font-size, 38px line-height
'5xl': ['3rem', { lineHeight: '3.125rem' }], // 48px font-size, 50px line-height
'6xl': ['3.75rem', { lineHeight: '3.875rem' }], // 60px font-size, 62px line-height
'7xl': ['4.5rem', { lineHeight: '4.625rem' }], // 72px font-size, 74px line-height
'8xl': ['6rem', { lineHeight: '6.125rem' }], // 96px font-size, 98px line-height
'9xl': ['8rem', { lineHeight: '8.125rem' }], // 128px font-size, 130px line-height
},
lineHeight: {
'normal': 'normal',
},
},
},If you apply this option, the line height appropriate for iOS will be applied even when you use Tailwind CSS text-lg, so you can avoid layout issues while using Tailwind CSS's default text sizes.