Replace default explicit spacing scale with multiplier system

[adamwathan]

This PR replaces the default spacing scale (--spacing-*) with a generative system based on a default spacing unit.

Instead of the default theme containing values like --spacing-4, --spacing-6, --spacing-8, etc., instead we just define a single --spacing value:

@theme {
  --spacing: 0.25rem;
}

Utilities like px-4 are derived from this unit by multiplying it by the value in the utility (4 in this case):

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

The biggest consequence of this change is that every value is available now, rather than just the explicitly configured values.

This means utilities like px-42 will work now, whereas prior to this PR only px-40 and px-44 were valid utilities. I personally found it very difficult to know which values actually existed at the higher end of the scale without IntelliSense, and in practice even when working with a skilled designer like Steve who helped design Tailwind's default spacing scale, I'd very often need to break out of it to implement a design, and trying to round to a value that was in the scale made the design worse, not better.

This PR allows you to use any whole number, as well as decimal numbers that are multiples of 0.25 to ensure classes like px-1.5 continue to work. While this means you can now technically do things like pt-97.25, I think the presence of the fractional value will be enough of a signal to developers that they are doing something a little unusual, and they can use their judgment as to whether they are making the right decision or not.

I'll update this PR with a lot more detail when I have a chance, as there are a few other things to explain like:

• Unifying all of the values for width/min-width/max-width/height/min-height/max-height utilities
• Deriving numeric line-height values from the spacing multiplier instead of a separate line-height scale
• Using --spacing: initial to disable the multiplier
• How you can still use an explicit spacing scale and ignore this change
• How we plan to use IntelliSense to surface a more curated set of spacing values even if smaller increments work when you type them explicitly

[philipp-spiess]

If the --spacing var has the inline flag, we could avoid the calc() here since the value would be static anyways.

[adamwathan]

Lightning CSS will evaluate and minify this for us if the value is inline so I figured we would just not worry about that in our codebase and let Lightning handle it 🙌🏻

[philipp-spiess]

gotcha!

[adamwathan]

Changed this to something else until we work on the codemod for this new spacing stuff.

[adamwathan]

This isn't strictly necessary for things to just work but without control over this from spacingUtility, the output of negative values would contain nested calc calls and just looked really ugly and unnecessary:

  .-ml-4 {
-   margin-left: calc(var(--spacing) * -4);
+   margin-left: calc(calc(var(--spacing) * 4) * -1);
  }

[Dudek-AMS]

can someone tell me how im supposed to use --spacing-2 now without writing the calcs all the time on my own inside components? @apply should be deprecated, but I have no way to use @apply p-2 inside my .svelte components without importing "tailwindcss" inside the component before. And when I do this, the components css will be blown up by it, since it loads all these css vars again into my components css.

@adamwathan