[v4] theme DEFAULT values

[cosn]

Hello,

I'm migrating my v3 config to v4, and had a question about default values, specifically, how would one set them in v4, when there's no measure to it. For example:

transitionTimingFunction: {
    DEFAULT: 'cubic-bezier(0.25, 1, 0.5, 1)',
},
transitionDuration: {
    DEFAULT: '0.35s',
},

Also on the same line but not necessarily DEFAULT value, how would this be moved over:

borderStyle: {
    inset: 'inset',
},

Thanks!

[wongjn]

DEFAULT keys are in the default namespace, so you'd do:

@theme {
  --default-transition-duration: 0.35s;
  --default-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

---

In v3,

borderStyle: {
    inset: 'inset',
},

wouldn't actually do anything – the border-style utilities are static and thus do not read from configuration:

tailwindcss/src/corePlugins.js

Lines 1654 to 1661 in 6069a81

	addUtilities({
	'.border-solid': { 'border-style': 'solid' },
	'.border-dashed': { 'border-style': 'dashed' },
	'.border-dotted': { 'border-style': 'dotted' },
	'.border-double': { 'border-style': 'double' },
	'.border-hidden': { 'border-style': 'hidden' },
	'.border-none': { 'border-style': 'none' },
	})

However, I can infer what you mean, and you can create your own utility for this like:

@utility border-inset {
  border-style: inset;
}

[cosn]

Thanks so much!

[rodogir]

@wongjn

What is the recommended way of handling spacing? We currently use the DEFAULT key for spacing and padding in our v3 config. I haven't found anywhere how to configure v4 so that "bare" p works. With v3 the config below would allow us to use p and all its variants (px, pt, etc.). Same for gap.

spacing: {
  DEFAULT: "16px"
},
padding: {
  DEFAULT: "16px"
}

[wongjn]

I don't think there's anyway to get that to work in v4 with theme configuration only. You may need to use @utility like:

@utility p {
  padding: 16px;
}

@utility px {
  padding-inline: 16px;
}

…

@utility gap {
  gap: 16px;
}