@yet3/tailwindcss-fluid-text weekly downloads statistics

TailwindCSS fluid text

A plugin that adds fluid typography to TailwindCss

Table of Contents

• Installation • Usage • Basic • Arbitrary values • Options • Config example • Live demo • Inspired by

Installation

or

In tailwind.config.js

Basic usage

Arbitrary values

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

Live demo

Play around on TailwindPlay

Inspired by

• Modern Fluid Typography Using CSS Clamp • bradlc/tailwindcss-fluid • davidhellmann/tailwindcss-fluid-type

Description from the npm listing.