tailwindcss-flow-type

A Tailwind CSS plugin for fluid, responsive typography that scales smoothly across screen sizes with minimal configuration.

Table of Contents

• Installation
• Usage
• Configuration
• Contributing

Installation

This plugin requires Tailwind CSS 4 or higher.

npm install --save tailwindcss-flow-type

Using bun

bun add tailwindcss-flow-type

Include the plugin in your .css file:

@import 'tailwindcss';

@plugin 'tailwindcss-flow-type';

Usage

The default behavior of the plugin don't override the default text-* classes provided by Tailwind CSS. Instead, it adds a new set of flow-* classes that you can use to apply fluid typography styles.

<article>
    <h1 class="flow-text-base">Fluid type</h1>
</article>

.flow-text-base {
    font-size: clamp(1.125rem, calc(1.125rem + ((1.25 - 1.125) * ((100vw - 20rem) / (96 - 20)))), 1.25rem);
}
.flow-text-base {
    line-height: 1.6;
}

Override default classes

You can override the default text-* classes by setting the override option to true when configuring the plugin:

@import 'tailwindcss';

@plugin 'tailwindcss-flow-type' {
    override: true
};

Then you can use the text-* classes to apply fluid typography styles:

<article>
    <h1 class="text-base">Fluid type</h1>
</article>

.text-base {
    font-size: clamp(1.125rem, calc(1.125rem + ((1.25 - 1.125) * ((100vw - 20rem) / (96 - 20)))), 1.25rem);
    line-height: var(--tw-leading, 1.6);
}

Configuration

The plugin comes with a default configuration (see below) but it's possible to customize this config for your project. As default, we use rem for better accessibility, but you can also use px.

@import 'tailwindcss';

@plugin 'tailwindcss-flow-type' {
    fontSizeMax: 1.25;
    fontSizeMin: 1.125;
    override: true;
    prefix: flow;
    ratioMax: 1.2;
    ratioMin: 1.125;
    screenMax: 96;
    screenMin: 20;
    unit: rem;
};

@theme {
    --flow-text-xs: -2;
    --flow-text-sm: -1;
    --flow-text-base: 0;
    --flow-text-lg: 1;
    --flow-text-xl: 2;
    --flow-text-2xl: 3;
    --flow-text-3xl: 4;
    --flow-text-4xl: 5;
    --flow-text-5xl: 6;
    --flow-text-6xl: 7;
    --flow-text-7xl: 8;
    --flow-text-8xl: 9;
    --flow-text-9xl: 10;

    --flow-line-height-xs: 1.6;
    --flow-line-height-sm: 1.6;
    --flow-line-height-base: 1.6;
    --flow-line-height-lg: 1.6;
    --flow-line-height-xl: 1.2;
    --flow-line-height-2xl: 1.2;
    --flow-line-height-3xl: 1.2;
    --flow-line-height-4xl: 1.1;
    --flow-line-height-5xl: 1.1;
    --flow-line-height-6xl: 1.1;
    --flow-line-height-7xl: 1;
    --flow-line-height-8xl: 1;
    --flow-line-height-9xl: 1;
}

Contributing

This project uses Bun as a runtime, test runner and bundler.

Thanks for wanting to help out! Here's the setup you'll have to do:

Clone the project

git clone git@github.com:MarioMH8/tailwindcss-flow-type.git

Go to the project directory

cd tailwindcss-flow-type

Install dependencies

bun install

Compile the project

bun run build

MIT License

Copyright 2021-2025 MarioMH