Back to blog

How to change Tailwind’s base text size and font family

Two simple ways to set the default font styles in Tailwind CSS

Irvin Zhan

August 1, 2024

Tailwind’s type scale scales based on your base text size. To override Tailwind’s default text size and font-family globally, you have two options.

Add the following to wherever you keep global styles. This can be where you import Tailwind:

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

html {
  font-size: 10px;
  font-family: "Inter", system-ui, sans-serif;
}

2. Add it to your tailwind.config.js

To add the global style to your tailwind.config.js, you can use a Tailwind plugin.

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin")

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        html: {
          fontSize: "10px",
          fontFamily: '"Inter", system-ui, sans-serif',
        },
      })
    }),
  ],
}

If you are changing Tailwind’s default font styles, you may also want to create your own type scale.

Join thousands of happy builders

Subframe lets you build stunning UI with beautifully crafted components and a drag-and-drop visual editor.