Add experimental extended spacing scale

[adamwathan]

This PR introduces a ton of new values to the default spacing scale. This is extracted from the @tailwindcss/ui plugin so it very battle-tested. Keeping it under experimental for now just in case we want to make a change or two.

High level changes are:

• Adding micro sizes, like p-0.5, p-1.5, p-2.5, and p-3.5
• Adding min-content and max-content to min-width, width, and max-width utilities
• Adding max-w-none
• Adding all of the spacing values to the inset plugin

Only difference vs. the Tailwind UI plugin is that I haven't included max-w-prose. I think the typography plugin can just add that itself via the extend property in the config it provides.

This feature is flagged as extendedSpacingScale in the experimental section:

// tailwind.config.js
module.exports = {
  experimental: {
    extendedSpacingScale: true
  },
 // ...
}

[anasbouzid]

Micro sizes don't work in the theme() function because of the dot notation. I'm wondering if it possible to return a Sass map/list instead of the default object representation [object Object]? this will allow more flexibility such as map-get(theme('spacing'), '3.5') and may even fix the upcoming theme('fontSize.2xl') issue you mentioned.

edit: I forgot that tailwindcss also supports other preprocessors and even normal css, not sure how to fix those issues.

[adamwathan]

You can use this notation actually: theme('spacing[2.5]')

[kevnk]

Interesting idea to add more spacing options... I guess it's up to each developer, but personally, I've found it super helpful to have fewer options. When you use the Golden Ratio for spacing, you have fewer options, but it seems to always have an option that works really well and looks really good.

I haven't really released it, but I've been working on some Golden Ratio utilities:

• A tailwind plugin: https://github.com/truefrontier/tailwindcss-golden-ratio/blob/master/index.js
• To calculate spacing using the Golden Ratio (shown in the video below): https://goldenratio.app/#/calculator

Check out this 2-minute screen share that briefly explains some benefits of using Golden Ratio spacing: https://www.loom.com/share/4745f99cdf5147b9940b13141ec581b7

A few "in the wild" production projects I've launched that use the Golden Ratio for spacing:

• https://www.universalmedicalinc.com/ (my first Golden Ratio project; compiled Golden Ratio from LESS so it's hard to inspect and find)
• https://www.logexinc.com/get-a-quote (my next Golden Ratio project; overriding BootstrapCSS to use only Golden Ratio spacing; any spacing class, you can see it being used)
• https://app.oneaudiobooks.com/listen (uses the above-mentioned tailwind plugin, uses CSS vars so you can really inspect)

In Summary: I've found fewer spacing options are better/faster/more efficient AND they look better when they're Golden Ratio related. If used for line-height too, it makes a vertical rhythm way more attainable.