Блог

Чтение https://tailwindcss.com/docs/responsive-design#overview документы Я не вижу никаких классов для очень маленьких устройств(например, iPhone 5)

Итак, если мне нужно сделать другой дизайн для iPhone 5 и nexus 7, есть ли способ сделать это с помощью tailwindcss ?

Спасибо!

Это означает, что незафиксированные утилиты (например uppercase ) вступают в силу для всех размеров экрана, в то время как префиксные утилиты (например md:uppercase ) вступают в силу только в указанной точке останова и выше.

напр text-xs sm:text-base md:text-lg .. В таком случае размер шрифта будет соответствовать:

• текст-xs: Все экраны, начиная с 0 пикселей до 639 пикселей, будут следовать этому. font-size: 0.875rem;
• sm:текстовая база: Все экраны, начиная с 640 пикселей до 767 пикселей, будут следовать font-size: 1rem;
• md:текст-lg: Все экраны, начиная с 768 по 1023, будут следовать font-size: 1.125rem;

Таким образом, ваш iPhone 5 с разрешением 320 пикселей будет следовать тексту-xs. И ваш Nexus 7 шириной 600 пикселей по-прежнему будет следовать тексту-xs.

Если вы все еще хотите добавить дополнительные экраны, вы можете это сделать:

 // tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xxs': '540px', // min-width
    },
  }
}
 

например
text-xs xxs:text-sm
, экраны будут следовать за текстом-xs до 539 пикселей, затем Nexus 7 будет следовать за текстом-sm до 639 пикселей.