Package Exports

tailwindcss-fluid-size
tailwindcss-fluid-size/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-fluid-size) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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