SpacingTokens

Description

This plugin helps replace the standard Tailwind spacing tokens rems to pixels (but with the final output in the CSS remaining in rems).

As humans often specify spacing in terms of pixels, using this set up you can see "padding top 40px" and then use .pt-40 in your HTML. Tailwind like spacing classes are generated, eg. mt-, pt-, h-, max-h- etc. by the Tailwind core plugins for padding, margin, width, height, maxHeight, gap, inset, space, and translate.

Key to understand is that .mt-4 will not produce margin-top: 1rem;, but instead will produce margin-top: 0.25rem; which is equivalent to 4px.

Before v3.4.0 you had to provide your own scale, the typing of which was tedious. After v3.4.0, this plugin outputs a scale based on multiples of 5, to a maximum of 100 with arbitrary values between 0 - 10px. Or, you can describe the scale and add any arbitrary values and the function will generate your scale for you.

Setup

Default

const { SpacingTokens } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  theme: {
    spacing: SpacingTokens()
  }
  ...
}

With no options specified SpacingTokens will generate a spacing scale based on multiples of 5, to a maximum of 100 with arbitrary values of 0 - 10px.

Scale defined:

const { SpacingTokens } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  theme: {
    spacing: SpacingTokens({
      scaler: 4,
      max: 200,
      arbitraries: {
        "400": "400px"
      }
    })
  }
  ...
}

With this config, SpacingTokens will generate a spacing scale based on multiples of 4, to a maximum of 200 along with arbitrary values of 0 - 10px and 400px as specified.

Unless you specify a scale manually, SpacingTokens will always output arbitrary values of 0 - 10px, because we always randomly need a mt-1 or pl-3 regardless of your spacing scale.

Manual scale

Note before v3.4.0 you have to provide your own token scale.

const { SpacingTokens } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  theme: {
    spacing: SpacingTokens({
      "0": "0",
      "1": "1px",
      "2": "2px",
      "3": "3px",
      "4": "4px",
      "5": "5px",
      "6": "6px",
      "7": '7px',
      "8": "8px",
      "9": "9px",
      "10": "10px",
      "12": "12px",
      "16": "16px",
      "20": "20px",
      "24": "24px",
      "28": "28px",
      "32": "32px",
      "36": "36px",
      "40": "40px",
      "44": "44px",
      "48": "48px",
      "52": "52px",
      "56": "56px",
      "60": "60px",
      "64": "64px",
      "68": "68px",
      "72": "72px",
      "76": "76px",
      "80": "80px",
      "84": "84px",
      "88": "88px",
      "92": "92px",
      "96": "96px",
      "100": "100px",
      "400": "400px",
      "600": "600px"
    })
  }
  ...
}

This manual scale is essentially what the defined scale above builds for you (although the manual scale stops at 100px and not 200px because typing it became tedious).

The curious case of minHeight

Tailwind documentation on customising spacing doesn't mention minHeight and, by default, Tailwind does not generate minHeight classes based on the spacing tokens. If you want to include minHeight, you'll need to extend it:

module.exports = {
  ...
  theme: {
    ...
    extend: {
      minHeight: ({ theme }) => theme('spacing')
    }
    ...
  }
  ...
}

Demo

Using:

SpacingTokens({
  scaler: 4,
  arbitraries: {
    "400": "400px"
  }
})

We would get padding, margin, width, height, maxHeight, gap, inset, space, and translate classes. Demonstrated here are the widthand height classes: