Responsive font sizes

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 ... {}?

[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.

[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!