Changing TailwindCSS Classes Values for Font Size according to Screen Size

Question

I'm trying to make the regular Fontsize Tailwind classes change their "rem" size depending on the screen being used.

E.g. text-base would be 1.125rem in screens with min-width 320px, but in larger screens like mind-width 1200px it would be 1.25rem.

Is there such a way to do this?

I was trying something like this but it didn't work :(

PS: don't mind the values I use for this example, I was trying it out lol

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        OS: "'Open Sans', sans-serif",
      },
      screens: {
        xs: {
          fontSize: {
            xs: "2rem",
            sm: "5rem",
            base: "1.125rem",
            lg: "2rem",
            xl: "3rem",
            "2xl": "4rem",
            "3xl": "5rem",
          },
        },
        sm: {
          fontSize: {
            xs: "0.875rem",
            sm: "1rem",
            base: "4rem",
            lg: "57rem",
            xl: "5rem",
            "2xl": "10rem",
            "3xl": "2.5rem",
          },
        },
      },
    },
  },
  plugins: [],
}

Answer 1

You cannot achieve that by using that approach Learn more here

Not recommends to use @apply, but you can easily acheive what you are want to like:

.custom-font-base {
  @apply text-sm sm:text-base md:text-lg
}