@carloitaben/tailwindcss-scale

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