@apexshift/tailwindcss-fluid-typography 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.1] - 2026-02-12
+
+### Added
+- Initial release
+- Fluid typography utilities using automatic `clamp()` preferred value calculation
+- Configurable min/max viewport, root font size, class prefix, and size scale
+- ESM-only module (`index.mjs`)
+- Plugin options + theme extension support
+- Responsive variants included by default
+
+### Notes
+- Tested with Tailwind CSS v3.4+ and v4.0+
+- Designed for projects using `html { font-size: 62.5%; }` (10px root), but works with any root size

package/CONTRIBUTING.md

@@ -0,0 +1,58 @@
+# Contributing
+Thank you for considering contributing to **tailwindcss-fluid-typography**!  
+We welcome bug reports, feature suggestions, documentation improvements, and pull requests.
+
+## Code of Conduct
+
+This project follows the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).  
+By participating, you are expected to uphold this code.
+
+## How to Contribute
+
+### 1. Reporting Bugs / Requesting Features
+
+- Open an issue on GitHub: [Issues](https://github.com/apexshift/tailwindcss-fluid-typography.git/issues)
+- Use a clear and descriptive title
+- Provide as much detail as possible (Tailwind version, Node version, minimal reproduction steps, screenshots if helpful)
+
+### 2. Submitting Pull Requests
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/amazing-change`
+3. Make your changes
+4. Ensure the plugin still works with Tailwind v3 and v4
+5. Test locally (see Development section below)
+6. Commit with a clear message: `feat: add fluid spacing utilities`
+7. Push to your fork and open a pull request
+
+We will review your PR as soon as possible.
+
+### Development Setup
+
+```bash
+git clone https://github.com/yourusername/tailwindcss-fluid-typography.git
+cd tailwindcss-fluid-typography
+npm install
+
+# Link locally for testing
+npm link
+
+# In a separate test project:
+npm link tailwindcss-fluid-typography
+npm run dev
+```
+
+### Style Guide
+- Use ESM(`import`/`export`)
+- Keep code readable and well commented
+- Update README.md and/or CHANGELOG.md when appropriate
+- Add tests if you introduce new behavior (future goal)
+
+### Commit Messages
+Follow [Conventional Commits](https://www.conventionalcommits.org/):
+- `feat:` new feature
+- `fix:` bug fix
+- `docs:` documentation changes
+- `chore:` maintenance
+
+Thank you again – every contribution helps!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 [Apex Shift Ltd]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# tailwindcss-fluid-typography
+A Tailwind CSS plugin that generates fluid typography utilities using `clamp()` with automatically calculated preferred values.
+
+Instead of manually writing `clamp(…)` expressions everywhere, define min/max font sizes once — the plugin computes the linear interpolation for smooth scaling across viewports.
+
+Works great with Tailwind v3 and v4.
+
+## Features
+- Automatic calculation of the preferred value in `clamp(min, preferred, max)`
+- Configurable min/max viewport widths
+- Supports custom root font size (perfect for 10px = 1rem setups)
+- Responsive variants (`sm:`, `md:`, etc.) included
+- Override defaults via `theme.extend.fluidTypography` or plugin options
+- Clean class names: `text-fluid-base`, `text-fluid-xl`, etc.
+
+## Installation
+```bash
+npm install --save-dev tailwindcss-fluid-typography
+```
+
+## Usage
+### 1. Add plugin
+```mjs
+// tailwind.config.mjs
+import fluidTypography from 'tailwindcss-fluid-typography'
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  plugins: [
+    fluidTypography({
+      rootFontSize: 10,
+      minViewport: 360,
+      maxViewport: 1536,
+      sizes: {
+        base: { min: 16, max: 20 }, // px values
+        xl: { min: 20, max: 32 },
+        '3xl': {min: 32, max: 56 }
+      }
+    })
+  ]
+}
+```
+
+### 2. Use the generated classes
+```html
+<h1 class="text-fluid-5xl font-bold">Fluid Heading</h1>
+<p class="text-fluid-base leading-relaxed">This paragraph scales smoothly.</p>
+<h2 class="text-fluid-xl md:text-fluid-2xl">Responsive section title</h2>
+```
+
+## Confguration Options
+You can pass option when adding the plugin, or extend the theme.
+
+| Option | Default | Description |
+| ------ | ------- | ----------- |
+| `rootFontSize` | `10` | Base font size in px (for rem conversion) |
+| `minViewport` | `375` | Minimum viewport width in px |
+| `maxViewport` | `1440` | Maximum viewport width in px |
+| `prefix` | `fluid-` | prefix for generated classes |
+| `sizes` | (see below) | Object of `{ min: number, max: number }` pairs |
+
+### Default Sizes (in px):
+```javascript
+{
+  xs:   { min: 12, max: 14 },
+  sm:   { min: 14, max: 16 },
+  base: { min: 16, max: 18 },
+  lg:   { min: 18, max: 22 },
+  xl:   { min: 22, max: 28 },
+}
+```
+
+## How it works (math behind the scenes)
+For each size:
+```plain
+minRem = minPx / rootFontSize
+maxRem = maxPx / rootFontSize
+
+slope = (maxRem - minRem) / (maxViewport - minViewport)
+intercept = minRem - slope * minViewport
+
+preferred = calc(${slope * 100}vw + ${intercept}rem)
+
+font-size: clamp(${minRem}rem, ${preferred}, ${maxRem}rem)
+```
+
+## Development
+```bash
+# Link locally for testing
+cd tailwindcss-fluid-typography
+npm link
+
+# In your project
+npm link tailwindcss-fluid-typography
+```
+
+## Licence
+MIT

package/SECURITY.md

@@ -0,0 +1,44 @@
+
+# Security Policy
+
+## Supported Versions
+
+We actively support the following versions of the plugin:
+
+| Version | Supported          |
+|---------|--------------------|
+| 0.0.x   | Yes (latest)       |
+| < 0.0.1   | No                 |
+
+Tailwind CSS versions ≥ 3.0 are supported.
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability, please **do not** open a public GitHub issue.
+
+Instead, report it privately so we can fix it quickly and safely:
+
+**Preferred method**  
+Send an email to: **security@apexshift.co.uk** 
+or use GitHub Security Advisories if the repository is public:
+
+1. Go to the repository → **Security** tab → **Report a vulnerability**
+2. Fill in the advisory form with details
+
+### What to include in your report
+
+- Description of the vulnerability
+- Steps to reproduce
+- Affected versions
+- Potential impact
+- Any suggested fixes (optional)
+
+### Response timeline
+
+- Acknowledgment within 48 hours
+- Detailed investigation within 5 business days
+- Fix released (or workaround provided) as soon as possible
+
+We will credit you in the release notes (unless you prefer to remain anonymous).
+
+Thank you for helping keep this project secure!

package/index.mjs

@@ -0,0 +1,71 @@
+// index.mjs
+import plugin from 'tailwindcss/plugin.js';
+
+const defaultConfig = {
+  minViewport: 375,
+  maxViewport: 1440,
+  rootFontSize: 10, // your 62.5% root → 1rem = 10px
+  prefix: 'fluid-',
+  sizes: {
+    xs:    { min: 12,  max: 14 },
+    sm:    { min: 14,  max: 16 },
+    base:  { min: 16,  max: 18 },
+    lg:    { min: 18,  max: 22 },
+    xl:    { min: 20,  max: 28 },
+    '2xl': { min: 24,  max: 36 },
+    '3xl': { min: 30,  max: 48 },
+    '4xl': { min: 36,  max: 60 },
+    '5xl': { min: 48,  max: 72 },
+  },
+};
+
+export default plugin.withOptions(
+  // Plugin implementation
+  function (options = {}) {
+    return function ({ addUtilities, theme }) {
+      const config = {
+        ...defaultConfig,
+        ...options,
+        sizes: { ...defaultConfig.sizes, ...options?.sizes },
+      };
+
+      const utilities = {};
+
+      Object.entries(config.sizes).forEach(([key, { min: minPx, max: maxPx }]) => {
+        if (typeof minPx !== 'number' || typeof maxPx !== 'number') return;
+
+        const minRem = minPx / config.rootFontSize;
+        const maxRem = maxPx / config.rootFontSize;
+
+        const viewportRange = config.maxViewport - config.minViewport;
+        const sizeRange = maxRem - minRem;
+        const slope = sizeRange / viewportRange;
+        const intercept = minRem - slope * config.minViewport;
+
+        const preferred = `calc(${slope * 100}vw + ${intercept}rem)`;
+
+        utilities[`.text-${config.prefix}${key}`] = {
+          'font-size': `clamp(${minRem}rem, ${preferred}, ${maxRem}rem)`,
+        };
+      });
+
+      addUtilities(utilities, ['responsive']);
+    };
+  },
+
+  // Theme extension (so users can override via tailwind.config.mjs)
+  function (options = {}) {
+    return {
+      theme: {
+        extend: {
+          fluidTypography: {
+            minViewport: options.minViewport ?? defaultConfig.minViewport,
+            maxViewport: options.maxViewport ?? defaultConfig.maxViewport,
+            rootFontSize: options.rootFontSize ?? defaultConfig.rootFontSize,
+            sizes: options.sizes ?? defaultConfig.sizes,
+          },
+        },
+      },
+    };
+  }
+);

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@apexshift/tailwindcss-fluid-typography",
+  "version": "0.0.1",
+  "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": "Team Apex",
+  "license": "MIT",
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apexshift/tailwindcss-fluid-typography.git"
+  },
+  "bugs": {
+    "url": "https://github.com/apexshift/tailwindcss-fluid-typography.git/issues"
+  },
+  "dependencies": {
+    "npm": "^11.10.0"
+  }
+}