Tailwind CSS: Set a Minimum Font Size

I always like to use the latest and greatest things out there for my side projects, or rather the new things I’m learning about. These days, it’s Tailwind CSS to make websites look nice. Specifically also libraries on top of Tailwind CSS which provide components to make things even easier to work with, such as daisyUI or HyperUI.

When you follow the instructions how to get everything in place and install things, either provided by one of the component libraries, or Tailwind CSS itself, you find yourself in a good position to start. Now, if you’re not too deep into all of these frameworks and 3rd party solutions and just want to tinker around like I do, I had a bit of trouble to find the right place how to override default settings or set them globally. For instance, I wanted to set a minimum font size for everything, while still having the option to update individual parts of the site. Let’s do this now.

Change Default Text / Font Size

First things first: I’m not sure if that’s really the right place to do modifications, however, it seemed the right place at the time, and it did exactly what I wanted: change the minimum font-size for my whole project.

When you install Tailwind CSS the way they have it documented on the page, you’ll end up with a index.css file somewhere in your folder structure (for me, it's src/index.css) and it typically looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, in order to make modifications for the whole site, you can add a couple of lines to this index.css file and update the html property/class(?) and just put regular CSS things in there. Here's the updated version of index.css to set the font-size to 14pt:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-size: 14pt;
    }
}

That’s it!