{"id":13480219,"url":"https://github.com/davidhellmann/tailwindcss-fluid-type","last_synced_at":"2025-12-29T23:50:11.221Z","repository":{"id":37274566,"uuid":"405162909","full_name":"davidhellmann/tailwindcss-fluid-type","owner":"davidhellmann","description":"A plugin that makes the use of Fluid Type a breeze.","archived":false,"fork":false,"pushed_at":"2024-11-29T22:16:51.000Z","size":142,"stargazers_count":356,"open_issues_count":3,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T12:54:20.909Z","etag":null,"topics":["fluid-type","modular-scale","tailwind","tailwindcss","typography"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidhellmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-09-10T17:33:32.000Z","updated_at":"2025-02-24T19:56:17.000Z","dependencies_parsed_at":"2024-04-09T21:47:33.105Z","dependency_job_id":"4075ec76-40ea-439a-9ae3-f137aba69125","html_url":"https://github.com/davidhellmann/tailwindcss-fluid-type","commit_stats":{"total_commits":35,"total_committers":3,"mean_commits":"11.666666666666666","dds":"0.11428571428571432","last_synced_commit":"99b841bb750781ac0c3d70baf91e763051537d66"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhellmann%2Ftailwindcss-fluid-type","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhellmann%2Ftailwindcss-fluid-type/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhellmann%2Ftailwindcss-fluid-type/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhellmann%2Ftailwindcss-fluid-type/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidhellmann","download_url":"https://codeload.github.com/davidhellmann/tailwindcss-fluid-type/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826801,"owners_count":20678858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fluid-type","modular-scale","tailwind","tailwindcss","typography"],"created_at":"2024-07-31T17:00:35.976Z","updated_at":"2025-12-29T23:50:11.177Z","avatar_url":"https://github.com/davidhellmann.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"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\u003carticle\u003e\n  \u003ch1 class=\"text-xl\"\u003eFluid type\u003c/h1\u003e\n\u003c/article\u003e\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\u003e **_Important Note:_**  \n\u003e 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` \u0026 `letterSpacing`\n\nAnd yes, you can also set the `letterSpacing` \u0026 `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\u003cp class=\"text-base\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/p\u003e\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` \u0026 `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\u003cp class=\"text-base\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/p\u003e\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` \u0026 `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\u003cp class=\"text-base\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/p\u003e\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\u003cp class=\"text-2xs\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/p\u003e\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\u003cp class=\"fluid-text-base\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/p\u003e\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\u003ch1 class=\"text-9xl/snug\"\u003eThe quick brown fox jumps over the lazy dogs\u003c/h1\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhellmann%2Ftailwindcss-fluid-type","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidhellmann%2Ftailwindcss-fluid-type","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhellmann%2Ftailwindcss-fluid-type/lists"}