tailwind-fibonacci

Fibonacci-sequence spacing scale for Tailwind CSS. Adds p-fib-8, gap-fib-34, mt-fib-89, and friends to every spacing utility in your project.

Why Fibonacci?

Each step is the sum of the two before it — so spacing relationships feel naturally proportional rather than arbitrarily incremental. The ratios between consecutive values converge toward the golden ratio (φ ≈ 1.618), giving layouts an inherent visual rhythm.

Token reference

| Token | px | Semantic alias | |---|---|---| | fib-1 | 1px | — | | fib-2 | 2px | — | | fib-3 | 3px | — | | fib-5 | 5px | fib-xs | | fib-8 | 8px | fib-sm | | fib-13 | 13px | — | | fib-21 | 21px | fib-md | | fib-34 | 34px | fib-lg | | fib-55 | 55px | fib-xl | | fib-89 | 89px | fib-2xl | | fib-144 | 144px | fib-3xl | | fib-233 | 233px | — |

All tokens work across every Tailwind spacing utility: p-, m-, gap-, w-, h-, top-, translate-, etc.

Installation

npm install tailwind-fibonacci

Usage

Tailwind v4 (CSS-first)

/* globals.css */
@import "tailwindcss";
@import "tailwind-fibonacci/v4";

That's it. All tokens are available immediately.

Tailwind v3 (JS config)

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

With options:

plugins: [
  require('tailwind-fibonacci')({
    steps: 14,       // generate 14 Fibonacci steps instead of 12
    unit: 'rem',     // use rem instead of px
    base: 16,        // rem base (default 16)
    semantic: true,  // include fib-xs through fib-3xl aliases (default true)
    extend: true,    // add alongside Tailwind defaults (default true)
  }),
],

Options

| Option | Type | Default | Description | |---|---|---|---| | prefix | string | "fib" | Prefix for all tokens. See warning below. | | unit | "px" \| "rem" | "px" | Value unit | | base | number | 16 | px → rem base (only used when unit: "rem") | | steps | number | 12 | How many Fibonacci numbers to generate | | semantic | boolean | true | Include fib-xs through fib-3xl aliases | | extend | boolean | true | true adds to defaults, false replaces them |

Prefix warning

The fib- prefix is non-negotiable in the v4 CSS file. If you use the v3 JS plugin and set prefix: "" with semantic: true, the package will warn you — bare names like sm, md, lg collide with Tailwind's built-in max-w-sm, max-w-lg, etc.

Local development

To test this package against a local Tailwind project before publishing:

cd tailwind-fibonacci
npm link

cd ../your-project
npm link tailwind-fibonacci

License

MIT