CODEWITHSUNDEEP
tailwind-css
Eric Nguyen
Eric Nguyen

Reputation: 1046

Decrease Font Size When Viewing on Small Screens With Tailwindcss

I want to keep base font size at 1rem, and when user views on mobile (under 640px) change it to .75rem (TW .text-sm class)

I thought doing it this way would work but seems like it's producing the opposite effect:

<p class="text-base sm:text-xs">Some paragraph text</p>

Codepen example here

Upvotes: 5

Views: 7418

Answers (2)

Pessimist God
Pessimist God

Reputation: 61

By default you design for small screen in Tailwind

Thus it must be

<p class="text-xs sm:text-base md:text-xl">Some paragraph text</p>

Upvotes: 3

Eric Nguyen
Eric Nguyen

Reputation: 1046

Figured it out. Since TW is mobile first, I had to define my base size, then target the rest:

<p class="text-xs sm:text-base">Some paragraph text</p>

Upvotes: 8

Related Questions