Support for spacing scales other than the Tailwind CSS default (--spacing: 0.25rem)

[sentience]

Problem or use case

Tailwind's default theme configuration uses whitespace values based on a 4-pixel scale (--spacing: 0.25rem;). For example, gap-1 creates a gap of 4 pixels at browsers' default zoom (100%) and font size (16px). Per this discussion, this is considered by many (including Tailwind's creator) to be a mistake in Tailwind's original design.

A single-pixel grid, where the numbers in the utility class names reflect the number of pixels, would have been preferable in hindsight. Unfortunately, this would be such a dramatic breaking change, that the Tailwind maintainers do not consider it practical to change the default scale.

Tailwind does, however, let the user override the default scale. Our internal design system sets --spacing: 0.0625rem; (1px), so that gap-4 creates a gap of 4 pixels (for example) in all of our UI codebases.

This presents a barrier for our hope to use Untitled UI as a starting point for new components in our design system. In order to bring Untitled UI components into our codebases, we would need to either do a big migration of our codebases back to Tailwind's default 4 pixel spacing scale (which Untitled UI assumes), or we would need to modify every Untitled UI component that we bring in to convert gap-1 (say) to gap-4.

While new projects may have the freedom to conform to Untitled UI's assumed Tailwind configuration, this presents barriers to using it in large, existing codebases like ours, which have a customized Tailwind configuration.

Proposed solution

I'm wondering if Untitled UI could be made spacing scale agnostic. Perhaps when installing components, the CLI could take a --spacing flag that would specify a number of pixels (4 being the default), and the CLI would automatically codemod the components (replacing gap-1 with gap-4 if --spacing=1, say).

This is effectively the codemod we would need to implement on our end to adopt Untitled UI, and I'm wondering if this is going to be a common-enough requirement for Untitled UI's customers that it could be worth implementing the fix in Untitled UI itself.

Alternatives considered

Like I said above, we could consider implementing a codemod to apply to newly-installed Untitled UI components to adjust Tailwind utility class names to our custom spacing scale. This would introduce a certain amount of DX friction, but it's at least something we could do entirely independently of Untitled UI, if the project does not see sufficient value in supporting non-default spacing scales.

Examples or mockups

No response