如何使用tailwindcss进行超小型设备设计？

Question

阅读https://tailwindcss.com/docs/responsive-design#overview文档我没有看到任何针对超小型设备（如 iPhone 5）的类

那么，如果我需要为 iPhone 5 和 Nexus 7 做不同的设计，有没有办法用 tailwindcss 来制作呢？

谢谢！

Answer 1

这意味着无前缀的实用程序（例如uppercase）对所有屏幕尺寸都有效，而带前缀的实用程序（例如md:uppercase）仅在指定的断点及以上位置生效。

例如text-xs sm:text-base md:text-lg。在这种情况下，字体大小将遵循：

• text-xs：从 0px 到 639px 的所有屏幕都将遵循此。font-size: 0.875rem;
• sm:text-base：从 640px 到 767px 的所有屏幕都将遵循font-size: 1rem;
• md:text-lg：从 768 到 1023 的所有屏幕都会跟随font-size: 1.125rem;

因此，您的 iPhone 5 为 320px 将遵循 text-xs。并且您的 Nexus 7 宽度 600px 仍将遵循 text-xs。

如果您仍然想添加额外的屏幕，那么您可以执行以下操作：

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

例如， text-xs xxs:text-sm 屏幕将遵循 text-xs 直到 539px，然后 Nexus 7 将遵循 text-sm 直到 639px。