Tailwind css predefined fontsize depending on screen

Question

I need to change fonsize accourding to screensize with tailwind css. Is there a way to define fontsizes according to screen in tailwind.config and apply them to all text? Normally i can create custom fontsize and apply in text element.

Define custom fontsize in tailwind.config:

module.exports = {
 content: ["./src/**/*.{js,jsx,ts,tsx}"],
 theme: {
    fontSize: {
      xs: "10px",
      s: "15px",
      sm: "17px",
      "2sm": "20px",
      m: "22px",
      md: "25px",
      l: "30px",
      xl: "35px",
      "2xl": "40px",
      "3xl": "45px",
      "4xl": "50px",
      "5xl": "55px",
      "6xl": "60px",
      "7xl": "65px",
      "8xl": "70px",
    },
 }
}

using it in text element:

<div className="text-s md:text-m  xl:text-xl">Text</div>

in order to avoid applying resposive text size for every text element i need it change fontsize value automatically. Maybe it will look like so in tailwind.config:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {
      screen: {
        lg: {
          xs: "10px",
          s: "15px",
          sm: "17px",
          "2sm": "20px",
          m: "50px",
          md: "25px",
        },
        md: {
          xs: "5px",
          s: "7px",
          sm: "10px",
          "2sm": "15px",
          m: "17px",
          md: "20px",
        },
      },
    },
  }
};

or do i have to apply responsize fontsize for every text?

Riess

Have you considered using viewport units, such as "vh" or "vw" to define font-size instead? developer.mozilla.org/en-US/docs/Web/CSS/… – Corriecorriedale

Answer 1

You can use Tailwind's @apply to create reusable styles in your global CSS file

@layer components {

  .text-responsive { 
    @apply text-xs sm:text-sm md:text-base;
  }

}

Then apply the custom class in your HTML:

<div className="text-responsive">Text</div>

Howlett