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

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;
}

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.