tailwindcss-scale

I should explain what this does

Installation

npm i @carloitaben/tailwindcss-scale

Requirements

• tailwindcss >= 3.3
• ESM Tailwind config

Usage

The minimum configuration for this plugin is the following:

import type { Config } from "tailwindcss"
import { scalePlugin } from "@carloitaben/tailwindcss-scale"

export default {
  // ...
  plugins: [
    // ...
    scalePlugin({
      unit: "vw",
      // Scale with viewport width
      values: [16, 360],
      // The root font size is 16px at 360vw
    }),
  ],
} satisfies Config

By default, the plugin generates an scale variant that proportionally resizes any spacing class:

<div className="w-12">When my root font size is 16px, my width is 48px.</div>

<div className="scale:w-12">
  When my root font size is 16px, my width is 48px on a screen 360px wide. I'll proportionally scale up on wider
  screens, and down on narrow ones.
</div>

With the previous configuration, the scaled element measures:

| Screen width | Element width | | ------------ | ------------- | | 120px | 16px | | 240px | 32px | | 360px (base) | 48px (base) | | 480px | 64px | | 720px | 96px |

Configuration

prefix

The generated variant name. Defaults to "scale".

type Config = {
  prefix?: string
}

scalePlugin({
  prefix: "fluid",
  // ...
})

<div className="fluid:w-12"></div>

unit

A viewport unit to use in calculations.

type Config = {
  unit: "vw" | "vh" | "vmin" | "vmax"
}

scalePlugin({
  unit: "vmax",
  // ...
})

values

The magic numbers for scaling.

/**
 * A valid screen from your Tailwind configuration.
 */
type Screen: string

type Value = [
  rootFontSize: number,
  viewportSize: number
]

type Config = {
  values: Value | { [K: Screen]: Value }
}

The simplest values definition is a tuple:

scalePlugin({
  values: [16, 360], // 16px @ 360vw
  // ...
})

You can also map scaling factors to your Tailwind screens using an object:

scalePlugin({
  // ...
  screens: {
    sm: "640px",
    // @media (min-width: 640px) { ... }
    xl: "1280px",
    // @media (min-width: 1280px) { ... }
  },
  // ...
  values: {
    DEFAULT: [16, 360],
    // 16px @ 360 units
    sm: [16, 1920],
    // @media (min-width: 640px): 16px @ 1920 units
    xl: [32, 2560],
    // @media (min-width: 1280px): 32px @ 2560 units
  },
})

So this element

<div className="scale:w-12"></div>

will have the following measurements:

| Screen width | Element width | | ------------ | ------------- | | 120px (base) | 16px (base) | | 240px (base) | 32px (base) | | 360px (base) | 48px (base) | | 480px (sm) | 64px (sm) | | 720px (sm) | 18px (sm) | | 1920px (xl) | 72px (xl) | | 2240px (xl) | 84px (xl) | | 2560px (xl) | 96px (xl) |

You can use Tailwind screen variants to opt-out of scaling on specific breakpoints or modify the property size:

<div className="w-12 sm:scale:w-12 lg:w-24 xl:scale-w-24"></div>

Caveats

• Currently breaks when the document root font size is changed (i.e. with zoom)
• There's probably a better way of doing this
• Not tested

License

MIT