tailwindcss-text-scale
v0.3.1
Published
<img src="https://raw.githubusercontent.com/matiasngf/tailwindcss-text-scale/main/text-scale-logo.png"/>
Downloads
9,989
Readme
Scale your text between breakpoints to create a better responsive experience.
<h2 className="text-scale-lg/4xl">
This text will scale between lg on mobile and 4xl on desktop.
</h2>
Demo | NPM | GitHub
Installation
npm i -d tailwindcss-text-scale
Add the pluign on your tailwind.config.js
file:
import textScalePlugin from 'tailwindcss-text-scale'
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
],
plugins: [
textScalePlugin({
minScreen: 320, // optional, defaults to theme.screens.sm
maxScreen: 1920, // optional, defaults to theme.screens.2xl
})
],
}
If you dont have a screens.sm or screens.2xl on your theme, you need to set the options
minScreen
andmaxScreen
.
Scaling text
text-scale-[min-size]/[max-size]
will scale your font-size between the two breakpoints default breakpoints.
<h2 className="text-scale-lg/4xl">
Scaled text
</h2>
You can use any font-size you want:
<h2 className="text-scale-[13px]/[20px]">
Scaled text
</h2>
To scale the text correclty you should use pixels or rems only.
Breakpoints
If you need to set a custom breakpoint for a component, you can use the text-screen-[min-size]/[max-size]
classes.
<div className="text-screen-[300px]/lg">
<h2 className="text-scale-xs/[40px]">
Scale this text between 300px and screen-lg.
</h2>
</div>
Plugin configurations
Setting custom breakpoints
By default the plugin will use screens.sm
and screens.lg
as the min and max breakpoint for the text scaling. You can set custom breakpoints on the plugin configuration:
textScalePlugin({
maxScreen: 1920,
minScreen: 320,
})
Custom classNames
If you don't like using text-[size]/[size]
, you can customize the variable name on the plugin configuration. For example, if you want your classes to be scaled-text-[size]/[size]
, you can set:
textScalePlugin({
textScalePrefix: 'scaled-text',
})
Now, to scale your text, use:
<h2 className="scaled-text-xs/lg">
Scaled!
</h2>
Optinally, you can set the screenScalePrefix
to change the text-screen-[size]/[size]
classes.
textScalePlugin({
screenScalePrefix: 'scaled-screen',
})
<div className="scaled-screen-sm/xl">
{...content}
</div>
Clamp
Clamp limits how much your font will scale. By default, the plugin will clamp the font-size to the min and max values. You can disable this behavior by setting clampMin
or clampMax
to false
:
textScalePlugin({
clampMin: false,
clampMax: false,
})