The default line-height of TailwindCSS caused a layout issue on iOS, which was resolved by modifying tailwind.config.js. Check here for detailed instructions.
When using tailwindcss in nativescript, there are times when various tailwindcss fontSizes are used, such as text-lg text-3xl.
However, line-height is automatically applied to tailwindcss.
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;In iOS, this lineHeight option causes layout problems.
So the writer above is also expressing that problem. The writer above said that it should be exactly 2px different from the font size.
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 apply this option, even if you use tailwindcss text-lg, the line-height appropriate for iOS will be applied, so you can avoid layout problems even if you use the default text size of tailwindcss.