### Sample Configuration: Just set fontSize property

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Provides a specific configuration example for the tailwindcss-fluid-type plugin where only the `fontSize` property is set, alongside minimum and maximum values for font and screen sizes.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 1.125,
        fontSizeMax: 1.25,
        ratioMin: 1.125,
        ratioMax: 1.2,
        screenMin: 20,
        screenMax: 96,
        unit: "rem",
        prefix: "",
      },
      values: {
        // ...
        base: 0,
        // ...
      },
    }),
  ],
};
```

--------------------------------

### Install and Basic TailwindCSS Fluid Type Plugin Configuration

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Demonstrates how to install the tailwindcss-fluid-type plugin via npm and add it to your tailwind.config.js for basic fluid typography implementation. This configuration enables the plugin's core functionality.

```javascript
// Install via npm
// npm install tailwindcss-fluid-type

// tailwind.config.js - Basic setup
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type"),
  ],
};

```

--------------------------------

### HTML Examples for Extending vs Replacing Values

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Illustrates the effect of the `extendValues` setting in HTML. The first example shows how custom values are added alongside defaults when `extendValues` is true. The second example demonstrates that only the specified custom values are available when `extendValues` is false.

```html
<!-- With extendValues: true (extending) -->
<div>
  <p class="text-base">Default value still available</p>
  <p class="text-custom">Custom value added</p>
  <p class="text-10xl">New extra large size</p>
</div>

<!-- With extendValues: false (replacing) -->
<div>
  <p class="text-small">Only custom values available</p>
  <p class="text-medium">text-base is NOT available</p>
  <p class="text-huge">text-xl is NOT available</p>
</div>
```

--------------------------------

### Install tailwindcss-fluid-type with npm or Yarn

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Installs the tailwindcss-fluid-type plugin using either npm or Yarn package managers. This is the first step to integrate the plugin into a project.

```bash
# Using npm
npm install tailwindcss-fluid-type

# Using Yarn
yarn add tailwindcss-fluid-type
```

--------------------------------

### Sample Usage of tailwindcss-fluid-type with HTML

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

An example of how to apply fluid type classes to an HTML element. The `text-base` class will utilize the fluid type settings configured in the Tailwind CSS setup.

```html
<article>
  <h1 class="text-xl">Fluid type</h1>
</article>
```

--------------------------------

### Complete TailwindCSS Fluid Type Plugin Configuration with Custom Settings

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Provides a comprehensive example of configuring the tailwindcss-fluid-type plugin in `tailwind.config.js`. This includes setting custom modular scale ratios, viewport ranges, units, and defining specific typography values for different text sizes.

```javascript
// tailwind.config.js - Complete configuration example
module.exports = {
  corePlugins: {
    fontSize: false, // Disable default fontSize if you want only fluid sizes
  },
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 1.125,      // Base minimum font size (18px)
        fontSizeMax: 1.25,       // Base maximum font size (20px)
        ratioMin: 1.125,         // Modular scale ratio at min viewport
        ratioMax: 1.2,           // Modular scale ratio at max viewport
        screenMin: 20,           // Minimum viewport size (320px)
        screenMax: 96,           // Maximum viewport size (1536px)
        unit: "rem",             // Use 'rem' or 'px'
        prefix: "",              // Add prefix like "fluid-" to text utilities
        extendValues: true,      // Extend default values or replace them
      },
      values: {
        xs: [-2, 1.6],           // [scale step, line height]
        sm: [-1, 1.6],
        base: [0, 1.6],
        lg: [1, 1.6],
        xl: [2, 1.2],
        "2xl": [3, 1.2],
        "3xl": [4, 1.2],
        "4xl": [5, 1.1],
        "5xl": [6, 1.1],
        "6xl": [7, 1.1],
        "7xl": [8, 1],
        "8xl": [9, 1],
        "9xl": [10, 1],
      },
    }),
  ],
};

```

--------------------------------

### Using Line Height Shorthand in HTML

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Demonstrates how to apply overridden line heights directly in HTML using Tailwind CSS classes. This shows examples of using default line heights and custom ones like 'tight', 'relaxed', and 'loose'.

```html
<!-- Using line height shorthand to override defaults -->
<article>
  <!-- Use default line height (1.6) -->
  <p class="text-base">Normal paragraph with default line height</p>

  <!-- Override with specific line height values -->
  <p class="text-base/tight">Tight line height (1.25)</p>
  <p class="text-base/relaxed">Relaxed line height (1.625)</p>
  <p class="text-base/loose">Loose line height (2)</p>

  <!-- Works with all size utilities -->
  <h1 class="text-4xl/none">Heading with line height 1</h1>
  <h2 class="text-xl/snug">Heading with snug spacing (1.375)</h2>
</article>
```

--------------------------------

### Configure Fluid Type with Font Size, Line Height, and Letter Spacing

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Configures fluid type to set `fontSize`, `lineHeight`, and `letterSpacing`. This extends the previous example by adding control over letter spacing, further refining typographic scales.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 1.125,
        fontSizeMax: 1.25,
        ratioMin: 1.125,
        ratioMax: 1.2,
        screenMin: 20,
        screenMax: 96,
        unit: "rem",
        prefix: "",
      },
      values: {
        // ...
        base: [
          0,
          {
            lineHeight: 1.6,
            letterSpacing: "-0.1rem",
          },
        ],
        // ...
      },
    }),
  ],
};

```

--------------------------------

### Generated CSS for Line Height Overrides

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Shows the CSS output generated by tailwindcss-fluid-type when line height overrides are applied. This includes examples of 'tight', 'relaxed', and other custom line height utilities, demonstrating the `line-height` property.

```css
/* Generated CSS with line height overrides */
.text-base {
  font-size: clamp(
    1.125rem,
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
  line-height: 1.6;
}

.text-base\/tight {
  font-size: clamp(
    1.125rem,
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
  line-height: 1.25;
}

.text-base\/relaxed {
  font-size: clamp(
    1.125rem,
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
  line-height: 1.625;
}
```

--------------------------------

### Generated CSS Output for Fluid Font Sizes (px)

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Presents the CSS output generated by the tailwindcss-fluid-type plugin when configured to use pixel ('px') units. This example shows the `clamp()` function utilizing pixel values for font sizes and viewport calculations.

```css
/* Generated CSS with px units */
.text-base {
  font-size: clamp(
    18px, 
    calc(18px + ((20 - 18) * ((100vw - 320px) / (1536 - 320)))),
    20px
  );
}

```

--------------------------------

### Component Using tailwind-merge with Fluid Type

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

A React component example demonstrating the use of the `cn` utility function, which integrates tailwind-merge with fluid type support. It shows how fluid text classes can be merged or overridden correctly based on props and additional class names.

```typescript
// Component using the cn utility
import { cn } from "@/lib/utils";

function Button({ className, size = "default" }) {
  return (
    <button
      className={cn(
        "fluid-text-base font-semibold",
        // These will properly merge/override
        size === "large" && "fluid-text-lg",
        size === "small" && "fluid-text-sm",
        className
      )}
    >
      Click me
    </button>
  );
}

// Usage examples
<Button />                                    // Uses fluid-text-base
<Button size="large" />                       // Uses fluid-text-lg (overrides base)
<Button className="fluid-text-xl" />         // Uses fluid-text-xl (overrides base)
<Button className="fluid-text-sm text-red-500" />  // Properly merges both classes
```

--------------------------------

### TailwindCSS Fluid Type Plugin Configuration with PX Units

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Demonstrates how to configure the tailwindcss-fluid-type plugin to use pixel ('px') units instead of 'rem'. This example sets specific pixel values for minimum and maximum font sizes and viewport dimensions.

```javascript
// Example: Using px units instead of rem
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 18,
        fontSizeMax: 20,
        ratioMin: 1.125,
        ratioMax: 1.2,
        screenMin: 320,
        screenMax: 1536,
        unit: "px",
      },
    }),
  ],
};

```

--------------------------------

### Fluid type configuration with lineHeight and letterSpacing

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Illustrates advanced configuration of the fluid type plugin, allowing for the simultaneous setting of `fontSize`, `lineHeight`, and `letterSpacing` as known from standard Tailwind CSS documentation.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      values: {
        // ...
        base: [
          0,
          {
            lineHeight: 1.6,
            letterSpacing: "-0.1rem",
          },
        ],
        // ...
      },
    }),
  ],
};
```

--------------------------------

### HTML Usage of Fluid Type Classes

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Demonstrates how to apply the generated fluid type utility classes to HTML elements. These classes correspond to the different typography formats defined in the configuration.

```html
<div>
  <p class="text-tiny">Tiny modular scale text</p>
  <span class="text-micro">Fixed 10px text</span>
  <p class="text-base">Fluid text with line height</p>
  <h2 class="text-heading">Heading with custom letter spacing</h2>
  <small class="text-caption">Fixed caption size</small>
</div>

```

--------------------------------

### Configure Fluid Type with Font Size and Line Height

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Sets the `fontSize` and `lineHeight` properties using fluid type settings. This configuration defines minimum and maximum font sizes, ratios, and screen ranges, outputting CSS with `clamp()` for responsive scaling.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        fontSizeMin: 1.125,
        fontSizeMax: 1.25,
        ratioMin: 1.125,
        ratioMax: 1.2,
        screenMin: 20,
        screenMax: 96,
        unit: "rem",
        prefix: "",
      },
      values: {
        // ...
        base: [0, 1.6],
        // ...
      },
    }),
  ],
};

```

--------------------------------

### Default Configuration for tailwindcss-fluid-type

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Shows the default configuration for the tailwindcss-fluid-type plugin within `tailwind.config.js`. It includes settings for font size, screen size, ratio, unit, prefix, and extends values.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      // your fluid type settings
      // works only with unitless numbers
      // This numbers are the defaults settings
      settings: {
        fontSizeMin: 1.125, // 1.125rem === 18px
        fontSizeMax: 1.25, // 1.25rem === 20px
        ratioMin: 1.125, // Multiplicator Min
        ratioMax: 1.2, // Multiplicator Max
        screenMin: 20, // 20rem === 320px
        screenMax: 96, // 96rem === 1536px
        unit: "rem", // default is rem but it's also possible to use 'px'
        prefix: "", // set a prefix to use it alongside the default font sizes
        extendValues: true, // When you set extendValues to true it will extend the default values. Set it to false to overwrite the values.
      },
      // Creates the text-xx classes
      // This are the default settings and analog to the tailwindcss defaults
      // Each `lineHeight` is set unitless and we think that's the way to go especially in context with fluid type.
      values: {
        xs: [-2, 1.6],
        sm: [-1, 1.6],
        base: [0, 1.6],
        lg: [1, 1.6],
        xl: [2, 1.2],
        "2xl": [3, 1.2],
        "3xl": [4, 1.2],
        "4xl": [5, 1.1],
        "5xl": [6, 1.1],
        "6xl": [7, 1.1],
        "7xl": [8, 1],
        "8xl": [9, 1],
        "9xl": [10, 1],
      },
    }),
  ],
  variants: {
    fluidType: ["responsive"],
  },
};
```

--------------------------------

### Create Configuration Data for Class Generation | JavaScript

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Merges user-provided options with default configurations to prepare data structures for generating CSS classes. It handles merging settings, conditionally including default values based on 'extendValues', and setting metadata like prefix and unit. The function validates that all settings are numbers.

```javascript
const createData = (options, data, defaults) => {
  if (defaults.settings && defaults.values) {
    data.settings = Object.fromEntries(
      Object.entries({
        ...defaults.settings,
        ...options?.settings
      })
    );

    const extendValues = data.settings.extendValues;

    delete data.settings.unit;
    delete data.settings.prefix;
    delete data.settings.extendValues;

    if (extendValues) {
      data.values = { ...defaults.values, ...options?.values };
    } else {
      const values = options?.values ? options?.values : defaults.values;
      data.values = { ...values };
    }

    data.prefix = options?.settings?.prefix || defaults.settings?.prefix || '';
    data.unit = options?.settings?.unit || defaults.settings?.unit || 'rem';

    data.settingsAreNumbers = Object
      .values(data.settings)
      .every(value => typeof value === 'number');

    return data;
  }
};

// Example usage
const options = {
  settings: {
    fontSizeMin: 1,
    ratioMin: 1.2,
    prefix: "fluid-",
    unit: "rem",
    extendValues: false
  },
  values: {
    small: [-1, 1.5],
    base: [0, 1.6]
  }
};

const result = createData(options, {}, defaults);
/* Returns:
{
  settings: {
    fontSizeMin: 1,
    fontSizeMax: 1.25,      // from defaults
    ratioMin: 1.2,
    ratioMax: 1.2,          // from defaults
    screenMin: 20,          // from defaults
    screenMax: 96           // from defaults
  },
  values: {
    small: [-1, 1.5],
    base: [0, 1.6]
    // No default values because extendValues: false
  },
  prefix: "fluid-",
  unit: "rem",
  settingsAreNumbers: true
}
*/

```

--------------------------------

### Generated CSS for Fluid Type

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Shows the CSS output generated by the tailwindcss-fluid-type plugin for various font size configurations. It uses the `clamp()` function for fluid scaling.

```css
.text-tiny {
  font-size: clamp(
    0.7119rem,
    calc(0.7119rem + (0.7233 - 0.7119) * ((100vw - 20rem) / (96 - 20))),
    0.7233rem
  );
}

.text-micro {
  font-size: 10px;
}

.text-heading {
  font-size: clamp(
    2.0238rem,
    calc(2.0238rem + (2.4883 - 2.0238) * ((100vw - 20rem) / (96 - 20))),
    2.4883rem
  );
  line-height: 1.1;
  letter-spacing: -0.02em;
}

```

--------------------------------

### HTML Usage of Default and Prefixed Fluid Font Sizes

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Shows how to use both Tailwind CSS's default font size classes and the prefixed fluid type classes within the same HTML structure. This enables mixing fixed and responsive typography.

```html
<!-- Using both default and fluid font sizes -->
<article>
  <!-- Default TailwindCSS fixed font size -->
  <span class="text-sm">Fixed small text (0.875rem)</span>

  <!-- Fluid font size with prefix -->
  <p class="fluid-text-base">Fluid base text that scales</p>

  <!-- Can mix both approaches -->
  <h1 class="fluid-text-xl">Fluid heading</h1>
  <small class="text-xs">Fixed extra small text</small>
</article>

```

--------------------------------

### Apply a Prefix to Fluid Type Classes

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Configures the plugin to prepend a custom prefix to all generated fluid type classes. This helps avoid naming conflicts and allows for clearer class identification in the HTML.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        // ...
        prefix: "fluid-",
      },
    }),
  ],
};

```

--------------------------------

### Generated CSS for text-base class

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Shows the CSS generated by the tailwindcss-fluid-type plugin for the `text-base` class, utilizing the `clamp()` CSS function for fluid typography based on screen size.

```css
.text-base {
  font-size: clamp(
    1.125rem,
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
}
```

--------------------------------

### Generated CSS Output for Fluid Font Sizes (rem)

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Shows the CSS output generated by the tailwindcss-fluid-type plugin for `text-base` and `text-4xl` utilities using default 'rem' units. It highlights the use of the CSS `clamp()` function for fluid sizing.

```css
/* Generated CSS output */
.text-base {
  font-size: clamp(
    1.125rem, 
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
  line-height: 1.6;
}

.text-4xl {
  font-size: clamp(
    2.0238rem, 
    calc(2.0238rem + (2.4883 - 2.0238) * ((100vw - 20rem) / (96 - 20))),
    2.4883rem
  );
  line-height: 1.1;
}

```

--------------------------------

### Fluid type configuration without lineHeight

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Demonstrates how to configure the fluid type plugin to only set the `fontSize` without specifying `lineHeight`, useful for simpler fluid type implementations.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      values: {
        // ...
        base: 0,
        // ...
      },
    }),
  ],
};
```

--------------------------------

### Generated CSS for Prefixed Fluid Type

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Illustrates the CSS output for fluid type utilities when a prefix is applied. Default Tailwind CSS classes remain unaffected, while fluid classes are generated with the specified prefix.

```css
/* Default TailwindCSS classes remain unchanged */
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Fluid classes have the prefix */
.fluid-text-base {
  font-size: clamp(
    1.125rem,
    calc(1.125rem + (1.25 - 1.125) * ((100vw - 20rem) / (96 - 20))),
    1.25rem
  );
  line-height: 1.6;
}

```

--------------------------------

### Basic HTML Usage of Fluid Type Utilities

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Illustrates how to apply fluid typography classes generated by the tailwindcss-fluid-type plugin in HTML. These classes, like `text-4xl` and `text-base`, automatically scale their font sizes based on viewport width.

```html
<!-- Basic usage in HTML -->
<article>
  <h1 class="text-4xl">Fluid Heading</h1>
  <p class="text-base">This paragraph scales fluidly between screen sizes.</p>
</article>
```

--------------------------------

### Integrate Fluid Type with Tailwind Merge for Class Management

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Provides TypeScript code for integrating the fluid type plugin with `tailwind-merge`. This ensures that `fluid-text` utility classes are recognized and can be correctly merged or overridden by `tailwind-merge`.

```typescript
import { type ClassValue, clsx } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [
        {
          "fluid-text": ["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl",
          ],
        },
      ],
    },
  },
});


export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

```

--------------------------------

### Calculate Fluid Font Size with CSS clamp() | JavaScript

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Calculates fluid font sizes using a modular scale and viewport interpolation, outputting a CSS clamp() function string. It requires settings for minimum and maximum font sizes, ratios, and screen dimensions. The function ensures correct min/max ordering and returns the calculated clamp string or the original value if settings are not numbers.

```javascript
const calcModularScale = (value, data) => {
  if (data.settingsAreNumbers && data.settings) {
    const sFtMin = data.settings?.fontSizeMin;
    const sFtMax = data.settings?.fontSizeMax;
    const sFtRMin = data.settings?.ratioMin;
    const sFtRMax = data.settings?.ratioMax;
    const sFtSMin = data.settings?.screenMin;
    const sFtSMax = data.settings?.screenMax;
    const unit = data.unit || 'rem';

    const minValue = sFtMin * Math.pow(sFtRMin, value);
    const maxValue = sFtMax * Math.pow(sFtRMax, value);

    const ftMin = Math.min(minValue, maxValue);
    const ftMax = Math.max(minValue, maxValue);

    return `clamp(${ftMin}${unit}, calc(${ftMin}${unit} + ((${ftMax} - ${ftMin}) * ((100vw - ${sFtSMin}${unit}) / (${sFtSMax} - ${sFtSMin})))), ${ftMax}${unit})`;
  }
  return value;
};

// Example usage with scale value 2 (for text-xl)
const data = {
  settingsAreNumbers: true,
  settings: {
    fontSizeMin: 1.125,
    fontSizeMax: 1.25,
    ratioMin: 1.125,
    ratioMax: 1.2,
    screenMin: 20,
    screenMax: 96,
  },
  unit: 'rem'
};

const result = calcModularScale(2, data);
// Returns: "clamp(1.4238rem, calc(1.4238rem + ((1.8 - 1.4238) * ((100vw - 20rem) / (96 - 20)))), 1.8rem)"

// Modular scale calculation breakdown:
// minValue = 1.125 * (1.125^2) = 1.4238rem
// maxValue = 1.25 * (1.2^2) = 1.8rem
// Scales linearly between 320px (20rem) and 1536px (96rem) viewports

```

--------------------------------

### Configure Prefix for Coexistence with Default Font Sizes

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Sets a prefix for fluid type utilities to allow them to coexist with Tailwind CSS's default font size utilities without conflicts. This configuration is applied in tailwind.config.js.

```javascript
// tailwind.config.js - Using prefix to coexist with default font sizes
module.exports = {
  // Keep default fontSize enabled
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        prefix: "fluid-",  // All utilities will be prefixed
        fontSizeMin: 1.125,
        fontSizeMax: 1.25,
        ratioMin: 1.125,
        ratioMax: 1.2,
        screenMin: 20,
        screenMax: 96,
      },
      values: {
        sm: [-1, 1.6],
        base: [0, 1.6],
        lg: [1, 1.6],
        xl: [2, 1.2],
      },
    }),
  ],
};

```

--------------------------------

### Define Fluid Type Value as a String

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Demonstrates setting a fluid type value directly as a string, useful for fixed pixel values or simpler cases. This bypasses the `clamp()` calculation for specific typographic scales.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      values: {
        // ...
        "2xs": "11px",
        // ...
      },
    }),
  ],
};

```

--------------------------------

### Configure tailwindcss-fluid-type plugin in tailwind.config.js

Source: https://github.com/davidhellmann/tailwindcss-fluid-type/blob/main/README.md

Adds the tailwindcss-fluid-type plugin to the `tailwind.config.js` file. Optionally, the `fontSize` core plugin can be disabled if only fluid font sizes are needed.

```javascript
// tailwind.config.js
module.exports = {
  // You can disable the fontSize core plugin if you don't need non fluid font sizes.
  // If you don't disable it, the fluid-type plugin simply overrule the default font-sizes if the keys are the same.
  // Or you can use both alongside when you set an prefix in the settings
  corePlugins: {
    fontSize: false,
    // ...
  },
  plugins: [
    require("tailwindcss-fluid-type"),
    // ...
  ],
};
```

--------------------------------

### Configure Font Size Formats with tailwindcss-fluid-type

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Defines typography values using different formats such as numbers for modular scale steps, arrays for font size with line height, objects for complete control, or strings for fixed sizes. This configuration is done within the tailwind.config.js file.

```javascript
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      values: {
        // Number: modular scale step only
        tiny: -3,

        // String: fixed size (no fluid behavior)
        micro: "10px",

        // Array [step]: modular scale step without line height
        small: [-1],

        // Array [step, lineHeight]: font size and line height
        base: [0, 1.6],

        // Array [step, object]: font size with line height and letter spacing
        heading: [
          4,
          {
            lineHeight: 1.1,
            letterSpacing: "-0.02em",
          },
        ],

        // Array [string, lineHeight]: fixed size with line height
        caption: ["12px", 1.4],

        // Array [string, object]: fixed size with complete typography
        label: [
          "14px",
          {
            lineHeight: 1.5,
            letterSpacing: "0.01em",
          },
        ],
      },
    }),
  ],
};

```

--------------------------------

### Integrate tailwind-merge with Fluid Type

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Extends tailwind-merge configuration in `lib/utils.ts` to correctly handle fluid type classes. This involves adding a 'fluid-text' prefix to the 'font-size' class group, ensuring proper merging of class names.

```typescript
// lib/utils.ts - Tailwind Merge with fluid type support
import { type ClassValue, clsx } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [
        {
          // Add fluid-text prefix to font-size class group
          "fluid-text": [
            "xs", "sm", "base", "lg", "xl",
            "2xl", "3xl", "4xl", "5xl", "6xl",
            "7xl", "8xl", "9xl"
          ],
        },
      ],
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

--------------------------------

### Extending Default Fluid Type Values

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Configure `tailwind.config.js` to extend the plugin's default fluid type values. The `extendValues: true` setting merges custom values with existing ones, allowing you to add new sizes like '10xl', '11xl', and 'custom' without replacing defaults.

```javascript
// tailwind.config.js - Extending default values (default behavior)
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        extendValues: true,  // Merge with defaults (default behavior)
      },
      values: {
        // These merge with all default values (xs, sm, base, lg, xl, 2xl-9xl)
        "10xl": [11, 1],
        "11xl": [12, 1],
        custom: [3, 1.3],
      },
    }),
  ],
};
```

--------------------------------

### Override Line Height Shorthand in Tailwind CSS

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Configure tailwind.config.js to override default line heights for fluid text utilities using the plugin's shorthand syntax. This allows for custom line spacing on various text sizes, impacting the generated CSS.

```javascript
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      values: {
        base: [0, 1.6],    // Default line height is 1.6
        xl: [2, 1.2],
        "4xl": [5, 1.1],
      },
    }),
  ],
};
```

--------------------------------

### Replacing Default Fluid Type Values

Source: https://context7.com/davidhellmann/tailwindcss-fluid-type/llms.txt

Configure `tailwind.config.js` to replace all default fluid type values with custom ones by setting `extendValues: false`. This limits the available text sizes to only those explicitly defined in the `values` object.

```javascript
// tailwind.config.js - Replacing default values
module.exports = {
  plugins: [
    require("tailwindcss-fluid-type")({
      settings: {
        extendValues: false,  // Replace all defaults
      },
      values: {
        // ONLY these values will be available
        small: [-1, 1.5],
        medium: [0, 1.5],
        large: [1, 1.4],
        huge: [2, 1.3],
      },
    }),
  ],
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.