Skip to content

Spacing Scale #2118

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

Open
jonathan-wondereur opened this issue Feb 28, 2025 · 2 comments
Open

Spacing Scale #2118

jonathan-wondereur opened this issue Feb 28, 2025 · 2 comments

Comments

@jonathan-wondereur
Copy link

The docs refer to spacing scale all over the place but I can find no mention of what the default spacing scale is or how to customize it.

This is quite frustrating as how am I supposed to know what numbers should work/what numbers are included in the spacing scale?

@adamwathan
Copy link
Member

Good catch, lot of stuff that was written for v3 when there was an explicit spacing scale that is kinda confusing now that everything is driven by a single --spacing multiplier variable in v4 by default.

The best reference right now is the v4 beta documentation:

https://v3.tailwindcss.com/docs/v4-beta#dynamic-spacing-scale

I'll make sure we get a dedicated spacing page added to the theme documentation though that talks about this.

@robacarp
Copy link

I appreciate the notion to centralize on a "spacing" attribute. When you build the page it can have a way to reference the size needed in a lookup fashion?

I do a lot of converting between handwritten CSS and tailwind, and the table which looked like this was very handy:

Class
Properties
w-0width: 0px;
w-pxwidth: 1px;
w-0.5width: 0.125rem; /* 2px */
w-1width: 0.25rem; /* 4px */

I could take a value, like 201px or 19rem and scan down the right side of the table to find the closest matching utility class. I do this all the time. At the moment I'm just using the v3 pages for this, and it's working fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants