godsplane
@godsplane

Можно ли в 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'],
      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',
        },
      }
    },
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
Самое простое - сделать свой класс с нужными экранами:
.text-adaptive {
  @apply text-sm

  @screen md {
    @apply text-base
  }
}

но можно и плагин запилить
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы