Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[request] useTailwindSpacing() #2184

Open
3 tasks done
broskees opened this issue Mar 22, 2023 · 5 comments
Open
3 tasks done

[request] useTailwindSpacing() #2184

broskees opened this issue Mar 22, 2023 · 5 comments

Comments

@broskees
Copy link

broskees commented Mar 22, 2023

Agreement

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
Copy link
Member

kellymears commented Mar 22, 2023

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
Copy link
Author

broskees commented Mar 23, 2023

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
Copy link
Member

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
Copy link
Member

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

@broskees
Copy link
Author

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

kodiakhq bot pushed a commit that referenced this issue Dec 21, 2023
For [@roots/bud-tailwindcss](https://bud.js.org/extensions/bud-tailwindcss)+[@roots/bud-wordpress-preset](https://bud.js.org/extensions/bud-wordpress-preset) users: Add support for `theme.spacing` and `theme.extend.spacing` to theme.json generator.

## Example

```ts
  bud.wpjson
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .useTailwindSpacing()
```

## Reference

- Feature proposed in #2184 

## Type of change

**PATCH: backwards compatible change**
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants