Does tailwind css supports define the font size xs values at each screen sizes level

[rahultokase]

currently, we can customize the font size values by extending it and it gets applied to all the applicable screen sizes by default. Are we thinking of supporting the extension the font size value per screen size basis ?

[torressam333]

I wish tailwind has an xs:text-4xl option. Any screens under 640px needs custom css media queries.

[andymccray]

You can use an un-prefixed rule to target screens under 640px:

<h1 class="text-4xl sm:text-5xl">…</div>

Which says to apply the text-4xl from 0px to 639px and then use text-5xl once the screen hits 640px. You can also define your own custom screen sizes if you need more granular control between 0 and 640px.

[wongjn]

To add to this, if only "simple" screens are defined in the Tailwind configuration, one can also use max-*: variants like:

<h1 class="max-sm:text-4xl text-5xl">…</div>

This would be equivalent to the previous snippet.

Furthermore, arbitrary media query variants exist too.

[torressam333]

Thanks, @andymccray !