Nice Paintings, Mondrian

    tailwindcss-fluid-size
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    tailwindcss-fluid-size

    A Tailwind CSS plugin that provides fluid fonts and spacings

    Installation

    npm install -D tailwindcss-fluid-size
    // or
    yarn add -D tailwindcss-fluid-size

    And add the plugin to your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
      // ...
      plugins: [
        require('tailwindcss-fluid-size'),
        // ...
      ]
    };

    Usage

    Just include the plugin and set the configuration. All settings are optional:

    require('tailwindcss-fluid-size')({
      prefix: '',
      fontMin: 12,
      fontMax: 16,
      viewMin: 320,
      viewMax: 1920,
      fontMinKeep: false,
      fontMaxKeep: false,
      spaceMinKeep: false,
      spaceMaxKeep: false,
      fontSizes: {
        xs1: { min: 0.625, max: 0.700, lh: 1.00 },
        sm1: { min: 0.750, max: 0.800, lh: 1.25 },
        bs1: { min: 1.000, max: 1.000, lh: 1.60 },
        xl1: { min: 1.100, max: 1.800, lh: 1.3 },
      },
      spaceSizes: {
        xs1: { min: 5, max: 20 },
        md1: { min: 10, max: 40 },
        lg1: { min: 20, max: 60 },
      }
    })

    It will extend: fontSizes, margin, padding, inset, gap, w, h, max-w,max-h

    In you code just use it as you would with tailwind:

    <h1 class="text-xl1">Big headline</h1>
    <p class="text-bs1">Will be scaled</p>
    <div clas="h-lg1">
      <!-- I'm just a spacer -->
    </div>
    
    <!-- Combine -->
    <p class="text-bs1 p-xs1">Added scaled padding to text</p>
    
    <!-- In case you set a prefix (fluid) -->
    <p class="text-fluid-bs1">Added scaled padding to text</p>

    Settings

    /**
     * Custom prefix to set between the property and the value
     * For example .p-{prefix}-xs1
     *
     * Default = ''
     */
    prefix?: string;
    
    /**
     * The minimum view width to use for scaling
     *
     * Default = 320px
     */
    viewMin?: number;
    
    /**
     * The maximum view width to use for scaling
     *
     * Default = 1920px
     */
    viewMax?: number;
    
    /**
     * The minimum base font size to use for scaling
     *
     * Default = 12
     */
    fontMin?: number;
    
    /**
     * The maximum base font size to use for scaling
     *
     * Default = 16
     */
    fontMax?: number;
    
    /**
     * Whether to keep the size shrinking after the min viewport has
     * been reached or just clamp the value to the min
     *
     * Default = false
     */
    fontMinKeep?: boolean;
    
    /**
     * Whether to keep the size growing after the max viewport has
     * been reached or just clamp the value to the max
     *
     * Default = false
     */
    fontMaxKeep?: boolean;
    
    /**
     * Whether to keep the size shrinking after the min viewport has
     * been reached or just clamp the value to the min
     *
     * Default = false
     */
    spaceMinKeep?: boolean;
    
    /**
     * Whether to keep the size growing after the max viewport has
     * been reached or just clamp the value to the max
     *
     * Default = false
     */
    spaceMaxKeep?: boolean;
    
    /**
     * Default font size ratio definitions. You can define the font size
     * ratios here. The ratio is always a multiplicator of the base min and max
     * font size. For example a basic definition of `base` and `xs1` looks like
     * this:
     *
     * ```
     * {
     *   smol: { min: 0.625, max: 0.7, lh: 1 },
     *   base: { min: 1, max: 1, lh: 1.6 },
     * }
     * ```
     *
     * Smol will scale from (12 * 0.625)px to (16 * 0.7)px
     * You can also set lh to define the lineheight for the size
     *
     * To use it in your code just reference it like this: `text-smol` etc.
     *
     * Default = {}
     */
    fontSizes?: FluidSizeProps<FluidSizeFont>;
    
    /**
     * Default space size definitions (px). Similar to font sizes, you define
     * a name and min & max value. The difference is you'll use pixel values here
     * instead of multiplicators. A simple configuration could look like this:
     *
     * ```
     * {
     *   megachonk: { min: 120px, max: 320px },
     *   ultrachonk: { min: 320px, max: 520px },
     * }
     * ```
     *
     * Smol will scale from (12 * 0.625)px to (16 * 0.7)px
     * You can also set lh to define the lineheight for the size
     *
     * To use it in your code just reference it like this:
     *  - `h-megachonk`
     *  - `w-megachonk`
     *  - `p-megachonk`
     *  - `mt-megachonk`
     *  - ...
     *
     * It will extend: `margin`, `padding`, `inset`, `gap`, `w`,
     * `h`, `max-w`, `max-h`
     *
     * Default = {}
     */
    spaceSizes?: FluidSizeProps<FluidSizeSpace>;

    License

    MIT

    Install

    npm i tailwindcss-fluid-size

    DownloadsWeekly Downloads

    17

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    6

    Last publish

    Collaborators

    • davideperozzi