Feature Request: Fluid Typography #8087
developedbygeo
started this conversation in
Ideas
Replies: 2 comments 4 replies
-
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. |
Beta Was this translation helpful? Give feedback.
4 replies
-
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 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.
Beta Was this translation helpful? Give feedback.
All reactions