Например:
У меня в дизайне есть 5 вариаций размеров по каждой для десктопа и мобилки, итого 10 вариаций размеров.
Я могу определить это в конфиге как:
fontSize: {
xs: ['0.875rem', '20px'],
sm: ['1rem', '24px'],
base: ['1.25rem', '30px'],
lg: ['1.5rem', '32px'],
xl: ['2rem', '40px'],
'2xl': ['2.5rem', '50px'],
},
Но я не хочу дублировать для декстопа дургие вариацияя, то есть так
я не хочу делать
fontSize: {
xs: ['0.875rem', '20px'],
sm: ['1rem', '24px'],
base: ['1.25rem', '30px'],
lg: ['1.5rem', '32px'],
xl: ['2rem', '40px'],
'2xl': ['2.5rem', '50px'],
mXs: ['1.25rem', '30px'],
mSm: ['1.5rem', '32px'],
mBase: ['1.75rem', '36px'],
mMd: ['2rem', '40px'],
mLg: ['2.5rem', '50px'],
mXl: ['3rem', '60px'],
m2Xl: ['3.5rem', '70px'],
},
Возможен ли такой вариант или похожий?Чтобы в верстке я просто писал text-sm и на пк это был один размер а на мобилке другой?
fontSize: {
xs: {
mobile: {
fontSize: '0.75rem',
lineHeight: '1rem',
},
desktop: {
fontSize: '1.75rem',
lineHeight: '1rem',
},
}
},