Impossible to set inherit for font-size, font-weight, and others

[KazimirPodolski]

What version of Tailwind CSS are you using?

4.3.0

What build tool (or framework if it abstracts the build tool) are you using?

Vite 8

What version of Node.js are you using?

v24

What browser are you using?

Brave

What operating system are you using?

Kubuntu

Reproduction URL

https://play.tailwindcss.com/3zFn5Q0rFq

Describe your issue

1. Try to set font-size: inherit and/or font-weight: inherit via Tailwind
2. font-family and/or color are set instead

It seems very counter-intuitive to me how those classes currently work:

<div class="text-inherit" />
<div class="text-[inherit]" />
<div class="font-inherit"/>
<div class="font-[inherit]"/>

Apparently it sets those:

.font-\[inherit\] {
  font-family: inherit;
}
.text-\[inherit\] {
  color: inherit;
}
.text-inherit {
  color: inherit;
}

[wongjn]

This happens because text-* and font-* are prefixes for more than one CSS property. When using arbitrary values in conjunction with an ambiguous value, Tailwind cannot infer which property you are after, so settles on some fallback.

Where this fallback is not the right choice, you can type-hint the arbitrary value to get the right property: https://play.tailwindcss.com/oESDyOWRmV.