[request] useTailwindSpacing()

[broskees]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

The feature

useTailwindSpacing()

Request for another method to keep spacing consistent with Tailwind design methodologies when using Tailwind with bud.

Theme.json Spacing JSON Generated:

{
  "spacing": {
    "spacingScale": [
      {
        "operator": "+",
        "increment": "0.125",
        "steps": "24",
        "mediumStep": "1.5",
        "unit": "rem"
      }
    ],
    "spacingSizes": [
      {
        "name": "None",
        "slug": "0",
        "size": "0px"
      },
      {
        "name": "1px",
        "slug": "px",
        "size": "1px"
      },
      {
        "name": "0.5",
        "slug": "0.5",
        "size": "0.125rem"
      },
      {
        "name": "1",
        "slug": "1",
        "size": "0.25rem"
      },
      {
        "name": "1.5",
        "slug": "1.5",
        "size": "0.375rem"
      },
      {
        "name": "2",
        "slug": "2",
        "size": "0.5rem"
      },
      {
        "name": "2.5",
        "slug": "2.5",
        "size": "0.625rem"
      },
      {
        "name": "3",
        "slug": "3",
        "size": "0.75rem"
      },
      {
        "name": "3.5",
        "slug": "3.5",
        "size": "0.875rem"
      },
      {
        "name": "4",
        "slug": "4",
        "size": "1rem"
      },
      {
        "name": "5",
        "slug": "5",
        "size": "1.25rem"
      },
      {
        "name": "6",
        "slug": "6",
        "size": "1.5rem"
      },
      {
        "name": "7",
        "slug": "7",
        "size": "1.75rem"
      },
      {
        "name": "8",
        "slug": "8",
        "size": "2rem"
      },
      {
        "name": "9",
        "slug": "9",
        "size": "2.25rem"
      },
      {
        "name": "10",
        "slug": "10",
        "size": "2.5rem"
      },
      {
        "name": "11",
        "slug": "11",
        "size": "2.75rem"
      },
      {
        "name": "12",
        "slug": "12",
        "size": "3rem"
      },
      {
        "name": "14",
        "slug": "14",
        "size": "3.5rem"
      },
      {
        "name": "16",
        "slug": "16",
        "size": "4rem"
      },
      {
        "name": "20",
        "slug": "20",
        "size": "5rem"
      },
      {
        "name": "24",
        "slug": "24",
        "size": "6rem"
      },
      {
        "name": "28",
        "slug": "28",
        "size": "7rem"
      },
      {
        "name": "32",
        "slug": "32",
        "size": "8rem"
      },
      {
        "name": "36",
        "slug": "36",
        "size": "9rem"
      },
      {
        "name": "40",
        "slug": "40",
        "size": "10rem"
      },
      {
        "name": "44",
        "slug": "44",
        "size": "11rem"
      },
      {
        "name": "48",
        "slug": "48",
        "size": "12rem"
      },
      {
        "name": "52",
        "slug": "52",
        "size": "13rem"
      },
      {
        "name": "56",
        "slug": "56",
        "size": "14rem"
      },
      {
        "name": "60",
        "slug": "60",
        "size": "15rem"
      },
      {
        "name": "64",
        "slug": "64",
        "size": "16rem"
      },
      {
        "name": "72",
        "slug": "72",
        "size": "18rem"
      },
      {
        "name": "80",
        "slug": "80",
        "size": "20rem"
      },
      {
        "name": "96",
        "slug": "96",
        "size": "24rem"
      }
    ]
  }
}

Use case

This feature will be useful for anyone who wants greater parity between Tailwind & Gutenberg styles

Notes

No response

[kellymears]

spacingSizes seems straight forward.

I've never configured spacing settings in either tailwind or the wp theme manifest. Is there a relationship between spacingScale and the tailwind config?

If so, could you provide the tailwind config that would generate the output you already provided?

[broskees]

Spacing Scale would have to be inferred unfortunately because tailwind doesn't have a functionality like that (not surprising because tailwind doesn't use sliders).

However, spacingSizes could work like so I believe:

module.exports = {
  theme: {
    spacing: {
      '0': '0px',
      'px': '1px',
      '0.5': '0.125rem',
      '1': '0.25rem',
      '1.5': '0.375rem',
      '2': '0.5rem',
      ...theRestOfThem
    }
  }
}

Perhaps the inference of spacingScale could be created from that?

[kellymears]

I think it is probably best to not try and infer and leave it up to the developer to define using the bud.tailwind.theme object:

bud.wpjson
  .set(`settings.spacing.spacingScale.operator`, `+`)
  .set(
    'settings.spacing.spacingScale.steps',
    Object.keys(bud.tailwind.theme.spacing).length
  )

But I'm still down for adding a simple function to generate the theme.spacing entries.

[kellymears]

It's actually chaos that WordPress lets you both define a scale and define the size entries themselves, when you think about it 😅

[broskees]

You're right it's a weird system lol. I'm not sure if your spacingscale will work, but I'll try it.