Feature Request: Fluid Typography

[developedbygeo]

Why?

TailwindCSS focuses on the mobile-first approach, using relative units for font sizes (among others). I think that having default options for fluid typography in place would be a great feature for responsiveness out of the box. Moreover, it would eliminate the need for additional packages or custom implementations, and compatibility-wise, it could be provided as an opt-in feature.

Compatibility

Currently, caniuse.com indicates that 95% of the browsers support viewport units, with the respective percentage being 90% for the clamp() function.

I reckon that this would lead to less duplication and leaner classes while maintaining Tailwind's customizable nature.

[jaymakes11]

Until this is supported (if it ever is), can anyone point me to some examples of how to achieve a fluid typography and spacing system with Tailwind I'd love for it to "just work" with existing Tailwind classes... seems possible but some example code would be super helpful.

[wongjn]

You should be able to add fluid values your Tailwind configuration as you'd like:

module.exports = {
  theme: {
    extend: {
      spacing: {
        1: 'clamp(…)',
        2: 'clamp(…)',
        3: 'clamp(…)',
        // etc…
      },
      fontSize: {
        xs: 'clamp(…)',
        sm: ['clamp(…)', { lineHeight: '1.125' }],
        base: ['clamp(…)', { lineHeight: '1.125' }],
        // etc…
      },
    },
  },
};

[philwolstenholme]

You can grab some code from https://cube-css-with-tailwind.netlify.app or https://christianpenrod.com/blog/tailwindcss-responsive-design-without-breakpoints.

[philwolstenholme]

Or use the calculators on https://utopia.fyi or https://chrisburnell.com/clamp-calculator

[barvian]

can anyone point me to some examples of how to achieve a fluid typography and spacing system with Tailwind I'd love for it to "just work" with existing Tailwind classes

I felt the same way! I just released a fluid plugin that works with every built-in utility and uses existing scales, i.e.:

fluid-tailwind.mp4

Curious to hear what others think 🙂

[adrienpoly]

I have implemented responsive font in several projects using RFS

There is an existing plugin by the creator of RFS and a discussion here #12238

I usually add it manually to my Tailwind config like that :

 fontSize: {
        xs: ['0.75rem', { lineHeight: '1rem' }],
        sm: ['0.875rem', { lineHeight: 'rfs(1.25rem)' }],
        base: ['rfs(1rem)', { lineHeight: 'rfs(1.5rem)' }],
        lg: ['rfs(1.125rem)', { lineHeight: 'rfs(1.75rem)' }],
        xl: ['rfs(1.25rem)', { lineHeight: 'rfs(1.75rem)' }],
        '2xl': ['rfs(1.5rem)', { lineHeight: 'rfs(2rem)' }],
        '3xl': ['rfs(1.875rem)', { lineHeight: 'rfs(2.25rem)' }],
        '4xl': ['rfs(2.25rem)', { lineHeight: 'rfs(2.5rem)' }],
        '5xl': ['rfs(3rem)', { lineHeight: '1' }],
        '6xl': ['rfs(3.75rem)', { lineHeight: '1' }],
        '7xl': ['rfs(4.5rem)', { lineHeight: '1' }],
        '8xl': ['rfs(6rem)', { lineHeight: '1' }],
        '9xl': ['rfs(8rem)', { lineHeight: '1' }]
      },

example PR : parisrb/paris-rb.org#235