Specificity issue when using font in utilities

[klaussner]

I'm porting an existing design system to Tailwind and noticed a specificity issue when using the font property in a custom utility. Consider these two utilities, for example (https://play.tailwindcss.com/FKQdkXHozt):

@import "tailwindcss";

@utility custom-font {
  font: 42px serif;
}

@utility custom-weight {
  font-weight: 700;
}

<div class="custom-font custom-weight">Example</div>

When both utilities are used on an element, font always overwrites font-weight. As a result, the text in the example doesn't have the font-weight applied. This is because font is not included in packages/tailwindcss/src/property-order.ts. Including it before font-family here fixes the issue:

tailwindcss/packages/tailwindcss/src/property-order.ts

Lines 344 to 347 in d7fc281

	'font-family',
	'font-feature-settings',
	'font-size',

I would be happy to open a PR if the Tailwind team considers this a bug. However, I'm unsure whether adding this property would have other implications.

[wongjn]

As workarounds, you could consider:

• Splitting font into its constituent properties: https://play.tailwindcss.com/vHRS3YVyAp?file=css. This works because utility class names with more properties get sorted before utilities with less.
• Use builtin utilities, either with:
  • arbitrary values: https://play.tailwindcss.com/eg79AMygy5
  • or theme tokens: https://play.tailwindcss.com/YzwbSiwzAi?file=css