Package Exports
- @yet3/tailwindcss-fluid-text
- @yet3/tailwindcss-fluid-text/src/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@yet3/tailwindcss-fluid-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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,
}),
],
};