TailwindCSS fluid text
A plugin that adds fluid typography to TailwindCss
Table of Contents
Installation
npm install @yet3/tailwindcss-fluid-textor
yarn add @yet3/tailwindcss-fluid-textIn tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
// ...
require('@yet3/tailwindcss-fluid-text'),
],
};Basic usage
<div class="fluid-text-base-3xl"><div class="fluid-text-lg-sm">Arbitrary values
<!-- fluid-text-xs-base-[screenMin,screenMax] -->
<div class="fluid-text-xs-base-[640,960]"><!-- fluid-text-[sizeMin,sizeMax,screenMin,screenMax] -->
<div class="fluid-text-[1.25,3,400,960]"><!-- fluid-text-[sizeMin,sizeMax,screenMin,screenMax] -->
<!-- screenMin and screenMax will be equal to values configured in plugin options -->
<div class="fluid-text-[2,2.5]">Options
| Name | Type | Default value | Example value | Description |
|---|---|---|---|---|
| fontSizeUnit | string | "rem" | "rem", "px" | Default unit of sizeMin and sizeMax. Can be either "rem" or "px" |
| sizeMin | number, string | 1 | 0.5, "24px", "3rem" | Minimal font size. Value can be a number (will use unit from fontSizeUnit option), or as string with sufix of "px" or "rem" |
| sizeMax | number, string | 2 | 2.1, "12px", "1rem" | Maximal font size. Value can be a number (will use unit from fontSizeUnit option), or as string with sufix of "px" or "rem" |
| screenUnit | string | "px" | "rem", "px" | Default unit of screenMin and screenMax. Can be either "rem" or "px" |
| screenMin | number, string | 375 | 25, "360px", "32rem" | Minimal screen width. Value can be a number (will use unit from screenUnit option), or as string with sufix of "px" or "rem" |
| screenMax | number, string | 1024 | 90, "1024px", "45rem" | Maximal screen width. Value can be a number (will use unit from screenUnit option), or as string with sufix of "px" or "rem" |
| rootFontSize | number | 16 | 16, 24, 32 | Font size of root element in pixels (1rem = ?px) |
| generateFromFontSizes | boolean | true | true, false | Whether plugin should generate fluid-text utilities from fontSizes configured in tailwind. (can only be used in plugin options) |
Config example
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
extend: {
fluidText: {
'sm-base': {
sizeMin: '12px'
sizeMax: '16px'
screenMin: '30rem' // 480px,
screenMax: '60rem' // 960px
},
'sm-big': {
sizeMin: 0.75 // 0.75rem,
sizeMax: 2 // 2rem,
// screenMin: default 375
// screenMax: default 1024
},
},
},
},
plugins: [
// ...
require('@yet3/tailwindcss-fluid-text')({
rootFontSize: 16, // 1rem = 16px
fontSizeUnit: 'rem',
sizeMin: 1, // default min font size (in rem)
sizeMax: 2, // default max font size (in rem)
screenUnit: 'px',
screenMin: 375, // default min screen width (in px)
screenMax: 1024, // default max screen width (in px)
generateFromFontSizes: true,
}),
],
};