{"_id":"@apexshift/tailwindcss-fluid-typography","_rev":"7-a595158541633777b6c91da9f6480847","name":"@apexshift/tailwindcss-fluid-typography","dist-tags":{"latest":"0.0.7"},"versions":{"0.0.1":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.1","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.1","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"a3859d95f430d7ecb00c5eead6fd8d2954820c86","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.1.tgz","fileCount":7,"integrity":"sha512-XMy2EakyFw4xxneR2ZybRiIhTL26rcwDZsgMHCBdxL73a8BGARNWCLIgeUhs+FlLP60G6qgHDWw33QwwODphcA==","signatures":[{"sig":"MEQCIEPY4wF7opk8O9BGUI3UPSevtOTc8IYYv2JcVK9yplHiAiBbSssqIcs/9lk8e04ZTDxzib4ypzT0TUA8+XHyFr7sMQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10500},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"ebc4b04df7f06c445bdc200eb40432cb152f83bf","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.1_1770932463603_0.5433611847199704","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.2","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.2","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"e0c6c4609d275378bfd6e98f5e0f8df6137df919","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.2.tgz","fileCount":7,"integrity":"sha512-3i8CyOvtHd9P82f5HsPeCl8YcDhUNzmLwS26Xk5+mTrDp5BtOJXsZNS/jWL/kom2GhnG3MbQortEn9XYVsSwwA==","signatures":[{"sig":"MEYCIQDmjMgxHqFSBptMsXbTFkg4+VRr6URhyEzZnCQWSy1vgQIhALo4GDeNKjrBegQ58V7Iwf+0Dnw1KajhtLTJ50UAXBiL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10500},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"e16f676ef1c0babdb9b3e0e7570a9c01e0408308","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.2_1770933017155_0.8917581665914591","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.3","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.3","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"6ba24999c79eb8ed0f14779270571cca6c005a19","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.3.tgz","fileCount":7,"integrity":"sha512-G5tUBZKu0vkJCx/jCykb5vc6kN45JSEZZfPksYRRtVd2mxhaopRhvnQZOFOAOvdI1Sb9n1F5ET/h9pbQTZedfA==","signatures":[{"sig":"MEYCIQDvNRVcYeDNGoeQiUb1b81oYWR6nhalfXaoXPwPx0cN/gIhAKAJ98S2JW92/W5ZAxyl7YSlGvxOmS7/4yldMv+oTQPs","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11977},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"a5f67ea4a11f4c2d5f544f52460f2e9e5a62b8c1","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.3_1770936664859_0.494083088688696","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.4","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.4","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"95ee2b3b8e04a7d27c98094910079c8189b43595","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.4.tgz","fileCount":7,"integrity":"sha512-CA6ttiuutN7dw6Ozn2kU1lTXHfIGNMgSaUPn5ZhTAkUaRXSG9S9/UMlj4qNHtj5M1wXE/t1owagALurnAZQuQg==","signatures":[{"sig":"MEUCIAhMZ3VUJOSiWD9sh1jf6W516oNOalLqvLk5i/uvVldaAiEAxRiXv8Z+e/YqLx/CgTIizK/aTXFJxwHQ0K+fZWc8HUs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12480},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"1959fa5151c4d86ab41be6b193bea2f26a14c5d2","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.4_1770938553367_0.04081134368924588","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.5","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.5","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"592d8693dcbae0317d87f2fba8ea631d71f30017","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.5.tgz","fileCount":7,"integrity":"sha512-Z5BHAOJoV4UgmmKbmPV6DB9nuXWS2sfw/Ek/aD7CpJTvpUwUvXKrmOZCzAyORBAMaOGmBXlJEp/fBd5mIyYitQ==","signatures":[{"sig":"MEQCIGViWuPxqyLDKdJARnHow6LKqxWdZmX6ssxU1vSpVC2fAiAsdwi3t2vSwE7TU/vp/9O3J2b7OTJyHnMWFxllMEMePQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12112},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"d055d3f669f461db1b475994308701961e538358","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.5_1770940017624_0.8935893099402308","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.6","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","_id":"@apexshift/tailwindcss-fluid-typography@0.0.6","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dist":{"shasum":"ab2178d08b3d6970abecd133a782fc469f42748b","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.6.tgz","fileCount":7,"integrity":"sha512-p9jXaTD/0CcY/UT7jc0dA3uOzK/vUDssV+Mn9rYtBW02YMY9ceXKXWfCAbZOcfTYaCsn7qzLsedfV9HTX00nVw==","signatures":[{"sig":"MEUCIQC1HZr/CkKC4aBTw/pSJG6ZfJvrnTqOC6m4Vjlzh220JwIgDRb/taEepRFDKbyVg486qMpPWQcxVKFN6/vmQIZOBuE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12002},"main":"./index.mjs","type":"module","exports":{".":"./index.mjs"},"gitHead":"23ec8a6e479eccb1c905da3a0e68f8b93e20f49a","_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"repository":{"url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git","type":"git"},"_npmVersion":"11.9.0","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","directories":{},"_nodeVersion":"25.2.1","dependencies":{"npm":"^11.10.0"},"_hasShrinkwrap":false,"devDependencies":{"tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-fluid-typography_0.0.6_1770941434502_0.5312966084017172","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@apexshift/tailwindcss-fluid-typography","version":"0.0.7","description":"Tailwind CSS plugin for automatic fluid typography using clamp()","type":"module","main":"./index.mjs","exports":{".":"./index.mjs"},"keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"author":{"name":"Team Apex"},"license":"MIT","peerDependencies":{"tailwindcss":"^3.0.0 || ^4.0.0"},"devDependencies":{"tailwindcss":"^4.0.0"},"repository":{"type":"git","url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git"},"bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"dependencies":{"npm":"^11.10.0"},"gitHead":"be9c1ef3306c8718f553c40ddef3f5b56ca23154","_id":"@apexshift/tailwindcss-fluid-typography@0.0.7","homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","_nodeVersion":"25.2.1","_npmVersion":"11.9.0","dist":{"integrity":"sha512-RbDBnsO/buaeSX5ETijbXPPImjw1qpEqkPCfkTdNnyK+ZIF9yPMBYCOIK/3YrMfJczOEWLvIv6eBFiwi/zJxHA==","shasum":"82ef66234130f8e0d51f1ccaa034e70a8610fb88","tarball":"https://registry.npmjs.org/@apexshift/tailwindcss-fluid-typography/-/tailwindcss-fluid-typography-0.0.7.tgz","fileCount":7,"unpackedSize":12234,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCJ5c1EWMd20sAhxyiq+o4tVxkDxiK7JdH2/7/Uf8zOzAIhANu7PaeWvo30ryUXYZkjaXmFMrPYDwqho3u/xdHHAZZT"}]},"_npmUser":{"name":"apexshift","email":"hi@apexshift.co.uk"},"directories":{},"maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwindcss-fluid-typography_0.0.7_1770942016149_0.32505823943429024"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-12T21:41:03.486Z","modified":"2026-02-13T00:20:16.456Z","0.0.1":"2026-02-12T21:41:03.766Z","0.0.2":"2026-02-12T21:50:17.306Z","0.0.3":"2026-02-12T22:51:05.014Z","0.0.4":"2026-02-12T23:22:33.523Z","0.0.5":"2026-02-12T23:46:57.781Z","0.0.6":"2026-02-13T00:10:34.629Z","0.0.7":"2026-02-13T00:20:16.347Z"},"bugs":{"url":"https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"},"author":{"name":"Team Apex"},"license":"MIT","homepage":"https://github.com/apexshift/tailwindcss-fluid-typography#readme","keywords":["tailwind","tailwindcss","tailwind-plugin","fluid-typography","clamp","responsive"],"repository":{"type":"git","url":"git+https://github.com/apexshift/tailwindcss-fluid-typography.git"},"description":"Tailwind CSS plugin for automatic fluid typography using clamp()","maintainers":[{"name":"apexshift","email":"hi@apexshift.co.uk"}],"readme":"# tailwindcss-fluid-typography\nA Tailwind CSS plugin that generates fluid typography utilities using `clamp()` with automatically calculated preferred values.\n\nInstead of manually writing `clamp(…)` expressions everywhere, define min/max font sizes once — the plugin computes the linear interpolation for smooth scaling across viewports.\n\nWorks great with Tailwind v3 and v4.\n\n## Features\n- Automatic calculation of the preferred value in `clamp(min, preferred, max)`\n- Configurable min/max viewport widths\n- Supports custom root font size (perfect for 10px = 1rem setups)\n- Responsive variants (`sm:`, `md:`, etc.) included\n- Override defaults via `theme.extend.fluidTypography` or plugin options\n- Clean class names: `text-fluid-base`, `text-fluid-xl`, etc.\n\n## Installation\n```bash\nnpm install --save-dev tailwindcss-fluid-typography\n```\n\n## Usage\n### 1. Add plugin\n```mjs\n// tailwind.config.mjs\nimport fluidTypography from 'tailwindcss-fluid-typography'\n\nexport default {\n content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n plugins: [\n fluidTypography({\n rootFontSize: 10,\n minViewport: 360,\n maxViewport: 1536,\n sizes: {\n base: { min: 16, max: 20 }, // px values\n xl: { min: 20, max: 32 },\n '3xl': {min: 32, max: 56 }\n }\n })\n ]\n}\n```\n\n### 2. Use the generated classes\n```html\n

Fluid Heading

\n

This paragraph scales smoothly.

\n

Responsive section title

\n```\n\n## Confguration Options\nYou can pass option when adding the plugin, or extend the theme.\n\n| Option | Default | Description |\n| ------ | ------- | ----------- |\n| `rootFontSize` | `10` | Base font size in px (for rem conversion) |\n| `minViewport` | `375` | Minimum viewport width in px |\n| `maxViewport` | `1440` | Maximum viewport width in px |\n| `prefix` | `fluid-` | prefix for generated classes |\n| `sizes` | (see below) | Object of `{ min: number, max: number }` pairs |\n\n### Default Sizes (in px):\n```javascript\n{\n xs: { min: 12, max: 14 },\n sm: { min: 14, max: 16 },\n base: { min: 16, max: 18 },\n lg: { min: 18, max: 22 },\n xl: { min: 22, max: 28 },\n}\n```\n\n## How it works (math behind the scenes)\nFor each size:\n```plain\nminRem = minPx / rootFontSize\nmaxRem = maxPx / rootFontSize\n\nslope = (maxRem - minRem) / (maxViewport - minViewport)\nintercept = minRem - slope * minViewport\n\npreferred = calc(${slope * 100}vw + ${intercept}rem)\n\nfont-size: clamp(${minRem}rem, ${preferred}, ${maxRem}rem)\n```\n\n## Development\n```bash\n# Link locally for testing\ncd tailwindcss-fluid-typography\nnpm link\n\n# In your project\nnpm link tailwindcss-fluid-typography\n```\n\n## Licence\nMIT","readmeFilename":"README.md"}