@lazy_sock/tailwindcss-fluid-typography

tailwindcss-fluid-typography

A tailwindcss plugin generating clamp functions directly in tailwind.

Installation

Install it:

npm i @lazy_sock/tailwindcss-fluid-typography

Then add it to the tailwind config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [require("@lazy_sock/tailwindcss-fluid-typography")],
};

Usage

<div class="fluid-[1_3_500_1000]">Lorem Ipsum</div>

You have to provide four parameters: the lowest font size (in rem), the highest font-size (in rem), the vw where scaling starts (in px) and the vw where scaling ends (in px). Those parameters are seperated by a underscore ( _ ).
If you don't know what those parameters are, check out this guide about scaling font-size linearly.

License

MIT