{"_id":"fluid-type-ui","name":"fluid-type-ui","dist-tags":{"latest":"2.0.8"},"versions":{"2.0.8":{"name":"fluid-type-ui","version":"2.0.8","description":"Bring fluid type to tailwindcss","main":"src/index.js","license":"MIT","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"peerDependencies":{"tailwindcss":">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"},"keywords":["modular-scale","fluid-type","tailwindcss"],"author":{"name":"David Hellmann"},"devDependencies":{"tailwindcss":"^3.0.24","tailwindcss-v2":"npm:tailwindcss@^2.2.16"},"_id":"fluid-type-ui@2.0.8","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-ZS2ofDGyswrRlkj/LRwr9CcN9NDqgQExikjFWNK9kDNfQ50VOjOl3h5eqg0/cGTR0TT9mc5uziDYMu3+SSyC+A==","shasum":"d812607d81e3485ca668f68600eab7c9e63f9002","tarball":"https://registry.npmjs.org/fluid-type-ui/-/fluid-type-ui-2.0.8.tgz","fileCount":11,"unpackedSize":30091,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGZJeHBUgpMtOOsDGhQtiOpZHRCMGHkG/jKcFy6NMMFIAiA0vbLWG1vxHu9CVhy8cHMvIczY48sJGCBMwqpoSjtF0w=="}]},"_npmUser":{"name":"npmuser3002","email":"fadiji3229@apdtax.com"},"directories":{},"maintainers":[{"name":"npmuser3002","email":"fadiji3229@apdtax.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fluid-type-ui_2.0.8_1785232185718_0.39461454907562366"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-28T09:49:45.651Z","2.0.8":"2026-07-28T09:49:45.843Z","modified":"2026-07-28T09:49:46.064Z"},"maintainers":[{"name":"npmuser3002","email":"fadiji3229@apdtax.com"}],"description":"Bring fluid type to tailwindcss","keywords":["modular-scale","fluid-type","tailwindcss"],"author":{"name":"David Hellmann"},"license":"MIT","readme":"# 👉🏻 tailwindcss-fluid-type\n\n![Tailwincss Fluid Type](https://github.com/davidhellmann/tailwindcss-fluid-type/raw/main/tailwindcss-fluid-type.png)\n\nA plugin that makes the use of Fluid Type a breeze.\n\n## 👉🏻 Installation\n\nInstall the plugin from npm:\n\n```bash\n# Using npm\nnpm install tailwindcss-fluid-type\n\n# Using Yarn\nyarn add tailwindcss-fluid-type\n```\n\nThen add the plugin to your tailwind.config.js file and do your settings if you're not happy with the defaults:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // You can disable the fontSize core plugin if you don't need non fluid font sizes.\n  // If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.\n  // Or you can use both alongside when you set an prefix in the settings\n  corePlugins: {\n    fontSize: false,\n    // ...\n  },\n  plugins: [\n    require(\"tailwindcss-fluid-type\"),\n    // ...\n  ],\n};\n```\n\n## 👉🏻 Usage\n\nNothing changed here to the default tailwindcss configuration:\n\n```html\n<article>\n  <h1 class=\"text-xl\">Fluid type</h1>\n</article>\n```\n\n## 👉🏻 Configuration\n\nThe plugin comes with a default configuration (see below) but it's possible to customize this config for your project.\nAs default, we use `rem` for better accessibility, but you can also use `px`.\n\n---\n\n> **_Important Note:_**  \n> If you set values you have to set all values that you need for your `font-sizes`. There is no value merging here.\n\n---\n\n### Default configuration\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      // your fluid type settings\n      // works only with unitless numbers\n      // This numbers are the defaults settings\n      settings: {\n        fontSizeMin: 1.125, // 1.125rem === 18px\n        fontSizeMax: 1.25, // 1.25rem === 20px\n        ratioMin: 1.125, // Multiplicator Min\n        ratioMax: 1.2, // Multiplicator Max\n        screenMin: 20, // 20rem === 320px\n        screenMax: 96, // 96rem === 1536px\n        unit: \"rem\", // default is rem but it's also possible to use 'px'\n        prefix: \"\", // set a prefix to use it alongside the default font sizes\n        extendValues: true, // When you set extendValues to true it will extend the default values. Set it to false to overwrite the values.\n      },\n      // Creates the text-xx classes\n      // This are the default settings and analog to the tailwindcss defaults\n      // Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.\n      values: {\n        xs: [-2, 1.6],\n        sm: [-1, 1.6],\n        base: [0, 1.6],\n        lg: [1, 1.6],\n        xl: [2, 1.2],\n        \"2xl\": [3, 1.2],\n        \"3xl\": [4, 1.2],\n        \"4xl\": [5, 1.1],\n        \"5xl\": [6, 1.1],\n        \"6xl\": [7, 1.1],\n        \"7xl\": [8, 1],\n        \"8xl\": [9, 1],\n        \"9xl\": [10, 1],\n      },\n    }),\n  ],\n  variants: {\n    fluidType: [\"responsive\"],\n  },\n};\n```\n\n### Fluid type configuration without `lineHeight`\n\nIt is also possible to set just the `fontSize` without set the `lineHeight`\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      values: {\n        // ...\n        base: 0,\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n### Fluid type configuration with `lineHeight` & `letterSpacing`\n\nAnd yes, you can also set the `letterSpacing` & `lineHeight` as you know from the tailwind\ndocumentation. `letterSpacing` can be all values that you like.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      values: {\n        // ...\n        base: [\n          0,\n          {\n            lineHeight: 1.6,\n            letterSpacing: \"-0.1rem\",\n          },\n        ],\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n## 👉🏻 Samples\n\n### Just set the `fontSize` property\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      settings: {\n        fontSizeMin: 1.125,\n        fontSizeMax: 1.25,\n        ratioMin: 1.125,\n        ratioMax: 1.2,\n        screenMin: 20,\n        screenMax: 96,\n        unit: \"rem\",\n        prefix: \"\",\n      },\n      values: {\n        // ...\n        base: 0,\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n```html\n<p class=\"text-base\">The quick brown fox jumps over the lazy dogs</p>\n```\n\n```css\n.text-base {\n  font-size: clamp(\n    1.125rem,\n    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),\n    1.25rem\n  );\n}\n```\n\n### Set the `fontSize` & `lineHeight` property\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      settings: {\n        fontSizeMin: 1.125,\n        fontSizeMax: 1.25,\n        ratioMin: 1.125,\n        ratioMax: 1.2,\n        screenMin: 20,\n        screenMax: 96,\n        unit: \"rem\",\n        prefix: \"\",\n      },\n      values: {\n        // ...\n        base: [0, 1.6],\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n```html\n<p class=\"text-base\">The quick brown fox jumps over the lazy dogs</p>\n```\n\n```css\n.text-base {\n  font-size: clamp(\n    1.125rem,\n    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),\n    1.25rem\n  );\n  line-height: 1.6;\n}\n```\n\n### Set the `fontSize`, `lineHeight` & `letterSpacing` property\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      settings: {\n        fontSizeMin: 1.125,\n        fontSizeMax: 1.25,\n        ratioMin: 1.125,\n        ratioMax: 1.2,\n        screenMin: 20,\n        screenMax: 96,\n        unit: \"rem\",\n        prefix: \"\",\n      },\n      values: {\n        // ...\n        base: [\n          0,\n          {\n            lineHeight: 1.6,\n            letterSpacing: \"-0.1rem\",\n          },\n        ],\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n```html\n<p class=\"text-base\">The quick brown fox jumps over the lazy dogs</p>\n```\n\n```css\n.text-base {\n  font-size: clamp(\n    1.125rem,\n    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),\n    1.25rem\n  );\n  line-height: 1.6;\n  letter-spacing: -0.1rem;\n}\n```\n\n### Set a value as string\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      values: {\n        // ...\n        \"2xs\": \"11px\",\n        // ...\n      },\n    }),\n  ],\n};\n```\n\n```html\n<p class=\"text-2xs\">The quick brown fox jumps over the lazy dogs</p>\n```\n\n```css\n.text-2xs {\n  font-size: 11px;\n}\n```\n\n### Set a prefix\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [\n    require(\"tailwindcss-fluid-type\")({\n      settings: {\n        // ...\n        prefix: \"fluid-\",\n      },\n    }),\n  ],\n};\n```\n\n```html\n<p class=\"fluid-text-base\">The quick brown fox jumps over the lazy dogs</p>\n```\n\n```css\n.fluid-text-base {\n  font-size: clamp(\n    1.125rem,\n    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),\n    1.25rem\n  );\n  line-height: 1.6;\n  letter-spacing: -0.1rem;\n}\n```\n\n#### 👉🏽 Compability with Tailwind Merge\n\nTo ensure compabibility with [`tailwind-merge`](https://github.com/dcastil/tailwind-merge), extends it's configuration to recognize `fluid-text` sizes.\nThis enables seamless overriding and filtering of tailwind classes with `tailwind-merge` utility.\n\n```\nimport { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        {\n          \"fluid-text\": [\"sm\", \"base\", \"lg\", \"xl\", \"2xl\", \"3xl\", \"4xl\", \"5xl\", \"6xl\", \"7xl\", \"8xl\", \"9xl\",\n          ],\n        },\n      ],\n    },\n  },\n});\n\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n```\n\n### Overwrite default line-height\n\nSometimes it may be useful to override the default line height that you set in your config. Therefore, this plugin supports the Tailwind font size line-height shorthand. This works as follows.\n\n```html\n<h1 class=\"text-9xl/snug\">The quick brown fox jumps over the lazy dogs</h1>\n```\n\nSee the [official Tailwind documentation](https://tailwindcss.com/blog/tailwindcss-v3-3#new-line-height-shorthand-for-font-size-utilities) for more information.\n\n## 👉🏻 Live Demo\n\n[Fluid Type Live Demo](https://play.tailwindcss.com/TegGD6vkSM)\n","readmeFilename":"README.md","_rev":"1-be39d2c6ac4f26f6503f205c666388d2"}