DOCSEARCHbyAlgolia
Submit Docs

tailwindcss-fluid-type

repository·main·Indexed 18 days ago

https://github.com/davidhellmann/tailwindcss-fluid-type

A Tailwind CSS plugin that automates the creation of fluid typography using CSS clamp(). It allows developers to define font sizes that scale smoothly between a minimum and maximum viewport width via a configurable settings object and fluid type scales.

Tokens
1.7K
Snippets
6
Records
6
Agent score
63%

What's inside tailwindcss-fluid-type

  1. Configure tailwindcss-fluid-type

    main

    The plugin is configured by passing an object to require("tailwindcss-fluid-type")() in your tailwind.config.js.

    Important: When defining values, you must provide all necessary properties for a font size. The plugin does not perform value merging; if you define a custom value, it must be complete.

    Settings Object

    Used to define the global behavior of the fluid calculation:

    • fontSizeMin (number): The minimum font size (unitless, e.g., 1.125 for 1.125rem).
    • fontSizeMax (number): The maximum font size.
    • ratioMin (number): The minimum multiplier.
    • ratioMax (number): The maximum multiplier.
    • screenMin (number): The minimum viewport width (unitless, e.g., 20 for 20rem).
    • screenMax (number): The maximum viewport width.
    • unit (string): The unit to use, defaults to "rem". Can be "px".
    • prefix (string): A string to prepend to generated classes (e.g., "fluid-").
    • extendValues (boolean): If true, extends default Tailwind values. If false, overwrites them. Defaults to true (implied by context).
    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: "",
        extendValues: true,
      },
      values: {
        // ...
      },
    }),
  ],
};

  2. Define font size values in tailwindcss-fluid-type

    main

    The values object defines the specific font size utilities (e.g., text-base, text-xl). You can define them in several ways:

    1. Simple Number (Font Size Only)

    Provides only the fluid font size. The line height will be determined by Tailwind's defaults or other utilities.

    base: 0

    2. Array (Font Size & Line Height)

    Provides a fluid font size and a unitless line height.

    base: [0, 1.6]

    3. Array with Object (Font Size, Line Height & Letter Spacing)

    Provides a fluid font size and an object containing lineHeight and letterSpacing.

    base: [0, { lineHeight: 1.6, letterSpacing: "-0.1rem" }]

    4. String (Static Value)

    Provides a static, non-fluid font size.

    "2xs": "11px"
    // Example of various value formats
values: {
  base: 0,                               // Font size only
  lg: [1, 1.6],                          // Font size + unitless line height
  xl: [2, { lineHeight: 1.2, letterSpacing: '-0.05em' }], // Font size + object
  "2xs": "11px",                      // Static string
}

  4. Configure tailwindcss-fluid-type settings

    main

    The settings object allows you to define the mathematical constraints and units used for fluid typography calculations. When configuring the plugin, you can override these default values to change how font sizes scale between screen boundaries.

    Key configuration keys include:

    • fontSizeMin: The minimum font size (at screenMin).
    • fontSizeMax: The maximum font size (at screenMax).
    • ratioMin: The typographic scale ratio used at the minimum screen size.
    • ratioMax: The typographic scale ratio used at the maximum screen size.
    • screenMin: The lower viewport boundary (in pixels or units).
    • screenMax: The upper viewport boundary (in pixels or units).
    • unit: The CSS unit used for output (e.g., 'rem').
    • prefix: A string to prepend to all generated fluid typography classes.
    • extendValues: Boolean determining whether to extend Tailwind's existing theme or replace it.
    settings: {
    fontSizeMin: 1.125,
    fontSizeMax: 1.25,
    ratioMin: 1.125,
    ratioMax: 1.2,
    screenMin: 20,
    screenMax: 96,
    unit: 'rem',
    prefix: '',
    extendValues: true,
}

  5. Define fluid type values and scales

    main

    The values object defines the fluid typography scale. Each key represents a font size level (e.g., xs, base, xl), and its value is an array containing two numbers:

    1. The scale step: An integer or float used to calculate the font size based on the typographic scale.
    2. The line height: A multiplier for the line height.

    Example mapping:

    • 'base': [0, 1.6] means the base size uses scale step 0 with a 1.6 line-height.
    • 'xl': [2, 1.2] means the xl size uses scale step 2 with a 1.2 line-height.
    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],
}

  6. Install and use tailwindcss-fluid-type as a Tailwind CSS plugin

    main

    The tailwindcss-fluid-type package is a Tailwind CSS plugin that generates fluid typography utilities. It is implemented using plugin.withOptions, allowing you to pass custom configuration options to the plugin.

    When configured, the plugin performs two main actions:

    1. Adds Utilities: It injects fluid font-size utilities into your CSS using addUtilities. These utilities support the fontSizeFluid variant.
    2. Extends Theme: It adds a fontSizeFluid key to your Tailwind theme object, allowing you to define fluid type scales that can be used as theme values.

    To use it, require the plugin in your tailwind.config.js and provide an options object to customize the fluid behavior.

    // tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-fluid-type')({
      // Your custom configuration options go here
    }),
  ],
}