Control font size at a specific breakpoink.
Install using npm
npm i responsive-font-size
Default sizes
text-xs: .75rem;
text-sm: .875rem;
text-tiny: .875rem;
text-base: 1rem;
text-lg: 1.125rem;
text-xl: 1.25rem;
text-2xl: 1.5rem;
text-3xl: 1.875rem;
text-4xl: 2.25rem;
text-5xl: 3rem;
text-6xl: 4rem;
text-7xl: 5rem;
Responsive Add size prefix before the class name {screen}:{size}
Breakpoints/screen
sm, md, lg, xl
Usage example
<p class="text-base sm:text-sm md:text-base lg:text-xl xl:text3xl">Hey there!</p>
Customizing font size and breakpoints Edit the variable.scss file to change the default font size and breakpoint values, located inside the src folder and run the command below to rebuild.
npm rfs-build
Made with ♥ by Obicerj