Responsive font sizes

[frederikhors]

Coming from Bootstrap I'm wondering if there is also on Tailwind something like: https://getbootstrap.com/docs/4.5/content/typography/#responsive-font-sizes: Responsive font sizes?

I have

h1 {
  @apply text-6xl;
}

but this is good for desktop only.

In mobile I'll be fine with text-2xl.

Is there a way to do it without using @screen ... {}?

[estevanmaito]

What preprocessor are you using?

Did you try any of this? https://tailwindcss.com/docs/using-with-preprocessors/#using-sass-less-or-stylus

[frederikhors]

I'm using postcss right now. Why do I need one of them?

[estevanmaito]

You didn't specified one, so I thought you could have a common problem with preprocessors.

As you just want alternatives to apply a different font-size for each breakpoint, there are not too much alternatives (HTML, CSS or plugin) https://tailwindcss.com/docs/adding-base-styles/#app

You could use this plugin, but it looks like the same as what you have now: https://github.com/benface/tailwindcss-typography

Or apply the styles directly on HTML: sm:text-2xl text-6xl

But if you want to stick to CSS, the only way is using @screen https://tailwindcss.com/docs/functions-and-directives/#apply

/* Won't work: */
.btn {
  @apply block bg-red-500;
  @apply hover:bg-blue-500;
  @apply md:inline-block;
}

/* Do this instead: */
.btn {
  @apply block bg-red-500;
}
.btn:hover {
  @apply bg-blue-500;
}
@screen md {
  .btn {
    @apply inline-block;
  }
}

[MartijnCuppens]

Hi @frederikhors,

You can also use RFS (Bootstraps resizing engine) as a PostCSS plugin. Therefor you'll need to install rfs (npm install rfs or yarn add rfs) and adjust your postcss.config.js file:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('rfs'),
        require('autoprefixer')
    ]
};

Now you can use the rfs() function, just wrap it around any unit you want to resize in your custom CSS.

If you want to use tailwinds @apply functionality, you'll need to enable rfs in your tailwind.config.js:

module.exports = {
    theme: {
        fontSize: {
            xs: 'rfs(0.75rem)',
            sm: 'rfs(0.875rem)',
            base: 'rfs(1rem)',
            lg: 'rfs(1.125rem)',
            xl: 'rfs(1.25rem)',
            '2xl': 'rfs(1.5rem)',
            '3xl': 'rfs(1.875rem)',
            '4xl': 'rfs(2.25rem)',
            '5xl': 'rfs(3rem)',
            '6xl': 'rfs(4rem)'
        }
    }
};

If you now use

h1 {
  @apply text-6xl;
}

The following CSS will be generated:

h1 {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

You could also use it for fluid margin or padding utilities if you want to:

module.exports = {
    theme: {
        spacing: {
            px: '1px',
            '0': '0',
            '1': 'rfs(0.25rem)',
            '2': 'rfs(0.5rem)',
            '3': 'rfs(0.75rem)',
            '4': 'rfs(1rem)',
            '5': 'rfs(1.25rem)',
            '6': 'rfs(1.5rem)',
            '8': 'rfs(2rem)',
            '10': 'rfs(2.5rem)',
            '12': 'rfs(3rem)',
            '16': 'rfs(4rem)',
            '20': 'rfs(5rem)',
            '24': 'rfs(6rem)',
            '32': 'rfs(8rem)',
            '40': 'rfs(10rem)',
            '48': 'rfs(12rem)',
            '56': 'rfs(14rem)',
            '64': 'rfs(16rem)'
        },
        fontSize: {
            xs: 'rfs(0.75rem)',
            sm: 'rfs(0.875rem)',
            base: 'rfs(1rem)',
            lg: 'rfs(1.125rem)',
            xl: 'rfs(1.25rem)',
            '2xl': 'rfs(1.5rem)',
            '3xl': 'rfs(1.875rem)',
            '4xl': 'rfs(2.25rem)',
            '5xl': 'rfs(3rem)',
            '6xl': 'rfs(4rem)'
        }
    }
};

Hopes this helps, let me know if anything is still unclear.

[frederikhors]

This is amazing! Thanks @MartijnCuppens!

Can we add this in tailwindcss website docs, @adamwathan?

[adamwathan]

Thanks for providing that example @MartijnCuppens!

@frederikhors this is the very first time this has come up so likely not going to dedicate a docs page to it, but we have plans to add a new "guides" section to the docs site in the future where we can publish short articles teaching people how to do stuff like this, and I think this would be a great candidate for that section. I've made a note of it!