Fix layout problems when using tailwindcss text-lg, fontSize in nativescript

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.

https://x.com/wwwalkerrun/status/1787943663773118881

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.

Fix layout problems when using tailwindcss text-lg, fontSize in nativescript

다른 글