Можно ли в tailwindcss указывать размеры шрифты для мобилки и пк одновременно?
Например:
У меня в дизайне есть 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'], },
Но я не хочу дублировать для декстопа дургие вариацияя, то есть так я не хочу делать
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'], }, |
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', }, } }, |
fontSize: { xs: { mobile: { fontSize: '0.75rem', lineHeight: '1rem', }, desktop: { fontSize: '1.75rem', lineHeight: '1rem', }, } },
Дополнительно:
Самое простое - сделать свой класс с нужными экранами:
.text-adaptive { @apply text-sm @screen md { @apply text-base } } |
.text-adaptive { @apply text-sm @screen md { @apply text-base } }
но можно и плагин запилить
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, в Tailwind CSS можно указывать размеры шрифтов для различных устройств одновременно, используя встроенные классы для респонсивного дизайна.
Для задания размеров шрифтов для мобильных устройств и десктопов одновременно, вы можете воспользоваться классами вида `text-{размер}-{устройство}`, где `{размер}` - это размер шрифта, а `{устройство}` - это указание для какого устройства применяется данный стиль.
Например, чтобы задать размер шрифта 16 пикселей для мобильных устройств и 20 пикселей для десктопов, вы можете использовать следующий код:
<div class="text-sm md:text-lg">Текст с разными размерами шрифта</div>
В данном примере, `text-sm` устанавливает размер шрифта 16 пикселей для мобильных устройств, а `md:text-lg` - размер шрифта 20 пикселей для десктопов (md - это префикс для указания размера шрифта на медиа-запросе с минимальной шириной 768px).
Таким образом, вы можете легко задавать разные размеры шрифтов для различных устройств в Tailwind CSS, что поможет создать адаптивный и красивый дизайн для вашего веб-приложения.