使用 Tailwindcss 在小屏幕上查看时减小字体大小

Eri*_*yen 2 tailwind-css

我想将基本字体大小保持在 1rem,当用户在移动设备上查看时(低于 640px)将其更改为 .75rem(TW .class text-sm

我认为这样做会起作用,但似乎会产生相反的效果:

<p class="text-base sm:text-xs">Some paragraph text</p>
Run Code Online (Sandbox Code Playgroud)

Codepen 示例在这里

Eri*_*yen 5

弄清楚了。由于 TW 是移动优先的,我必须定义我的基本尺寸,然后定位其余的:

<p class="text-xs sm:text-base">Some paragraph text</p>
Run Code Online (Sandbox Code Playgroud)