nativescriptでtailwindcssを使用していると、text lgやtext 3xlなど、さまざまなtailwindcssのfontSizeを使うことがあります。 しかし、tailwindcssではline heightが自動的に適用されます。 <https://tailwindcss.com/docs/
nativescriptでtailwindcssを使用していると、text-lgやtext-3xlなど、さまざまなtailwindcssのfontSizeを使うことがあります。
しかし、tailwindcssではline-heightが自動的に適用されます。
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;iOSでは、このlineHeightオプションがレイアウトの問題を引き起こします。
そのため、上記の投稿者もこの問題について述べています。 投稿者によると、フォントサイズとの差は正確に2pxにすべきとのことです。
そこで、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',
},
},
},このオプションを適用すると、tailwindcssのtext-lgを使った場合でも、iOSに適したline-heightが適用されるため、tailwindcssのデフォルトのテキストサイズを使ってもレイアウトの問題を回避できます。