---
title: "Scale Font Based on Screen Size With Tailwind"
slug: scale-font-based-on-screen-size-with-tailwind
canonical_url: https://nerdymomocat.github.io/posts/scale-font-based-on-screen-size-with-tailwind/
collection: Stream
published_at: 2024-07-26T00:00:00.000Z
updated_at: 2024-11-27T00:00:00.000Z
tags: 
  - Coding
  - Tips
  - Webtrotion
author: "Nerdy Momo Cat"
---

## Navigation Context

- Canonical URL: https://nerdymomocat.github.io/posts/scale-font-based-on-screen-size-with-tailwind/
- You are here: Home > Posts > Stream > Scale Font Based on Screen Size With Tailwind

### Useful Next Links
- [Home](https://nerdymomocat.github.io/)
- [Bundles](https://nerdymomocat.github.io/collections/bundles/)
- [Logbook](https://nerdymomocat.github.io/collections/logbook/)
- [Notes](https://nerdymomocat.github.io/collections/notes/)
- [Stream](https://nerdymomocat.github.io/collections/stream/)

Today I learnt that Tailwind doesn’t automatically scale base font sizes based off screen or viewport sizes. Sure there are plugin options and complicated stuff, but I am not a front end wizard, and adding this to my `global.css` helped. You check out the difference in font size for this website on mobile and desktop.

```
html {
    font-size: 14px;
    @media screen(sm) {
      font-size: 16px;
    }
  }
```