Genera tipografías fluidas con clamp() y escalas modulares armónicas para aplicaciones web responsivas sin media queries
Carga ratios modulares recomendados y escalas responsivas
Define los límites para la interpolación lineal
Body text scales smoothly across all devices without breakpoint jumps.
:root {
--font-size-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem);
--font-size-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem);
--font-size-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem);
--font-size-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem);
--font-size-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem);
--font-size-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem);
--font-size-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem);
--font-size-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem);
}@theme {
--text-xs: clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem);
--text-sm: clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem);
--text-base: clamp(1rem, 0.188vw + 0.956rem, 1.125rem);
--text-md: clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem);
--text-lg: clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem);
--text-xl: clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem);
--text-2xl: clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem);
--text-3xl: clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem);
}// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'xs': 'clamp(0.638rem, 0.122vw + 0.609rem, 0.719rem)',
'sm': 'clamp(0.8rem, 0.15vw + 0.765rem, 0.9rem)',
'base': 'clamp(1rem, 0.188vw + 0.956rem, 1.125rem)',
'md': 'clamp(1.25rem, 0.235vw + 1.195rem, 1.406rem)',
'lg': 'clamp(1.563rem, 0.291vw + 1.494rem, 1.756rem)',
'xl': 'clamp(1.956rem, 0.366vw + 1.87rem, 2.2rem)',
'2xl': 'clamp(2.444rem, 0.451vw + 2.338rem, 2.744rem)',
'3xl': 'clamp(3.05rem, 0.573vw + 2.916rem, 3.431rem)',
}
}
}
}