Tailwind Tokens: Additional gaps and space

[pschaub]

Currently the TailwindCSS tokens are adding custom gaps and space values:

base/tokens/tailwind/spacing.json

Lines 28 to 41 in 1b6bbf4

	"gap": {
	"xs": "8px",
	"sm": "12px",
	"md": "12px",
	"lg": "20px",
	"xl": "20px"
	},
	"space": {
	"xs": "8px",
	"sm": "12px",
	"md": "12px",
	"lg": "20px",
	"xl": "20px"
	}

Why do we set them? Why is there no 16px? Why are they duplicated? Is there any relation to the breakpoints?

Mostly you are using the default gap values (e.g. gap-1 instead of gap-md); see https://tailwindcss.com/docs/gap

[mfranzke]

We've aligned on this again and will change it to 4px steps, like this:

"gap": { 
     "xs": "4px", 
     "sm": "8px", 
     "md": "12px", 
     "lg": "16px", 
     "xl": "20px",

     "2xl": "24px"
}, 
"space": { 
     "xs": "4px", 
     "sm": "8px", 
     "md": "12px", 
     "lg": "16px", 
     "xl": "20px" 
     "2xl": "24px"

}

[pschaub]

But why adding these additional options instead of just using the numbers that already exist?
I don't see why we need gap-xl if we already have gap-1.5.

[mfranzke]

But why adding these additional options instead of just using the numbers that already exist? I don't see why we need gap-xl if we already have gap-1.5.

Valid aspect. To give you some context on these tokens, they have been initially developed out of an older guidelines version, so both keys and values are retrieved out of this older pattern. It would be perfectly valid to use the default gap- tokens if they fit your needs.

What do you suggest how we should proceed on this? As gap-1, gap-2 etc. should be available to the developers already and these values could be simply taken into account only if someone sees a need in this, I could even also think about leaving them in there and documenting this quite clearly.

[pschaub]

Thanks for the explanation, now I understand why these tokens exist. For me both would be ok, because we will use only the numbers in our application. Terms like "md" are known as breakpoints and could lead to confusion if they are also used for gaps at the same time. I guess for this reason numbers were chosen for TailwindCSS defaults. But of course you can completely customize it. Finally, a good documentation with recommendations is certainly what shows us developers the right way.