Typography utilities have redundant properties that can be improved.

[MikeLee0358]

What version of Tailwind CSS are you using?

v4.1.11

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

N/A

What version of Node.js are you using?

N/A

What browser are you using?

FireFox

What operating system are you using?

macOS

Reproduction URL

tailwind playground

Describe your issue

<Note: I'm study tailwind source code>

The Typography utilities letter-spacing(tracking-) and font-weight(font-) have redundant properties.

example: (see the tailwind playground link)

.font-thin {
--tw-font-weight: var(--font-weight-thin); <- redundant property
font-weight: var(--font-weight-thin); <- just use this is fine
}

.tracking-normal {
--tw-tracking: var(--tracking-normal); <- redundant property
letter-spacing: var(--tracking-normal);<- just use this is fine
}

I don't see var(--tw-font-weight) or var(--tw-tracking) used anywhere in the Typography utilities.
Are those used somewhere?

[wongjn]

They are used with font size utilities:

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 5053 to 5064 in 7779d3d

	decl(
	'letter-spacing',
	options['--letter-spacing']
	? `var(--tw-tracking, ${options['--letter-spacing']})`
	: undefined,
	),
	decl(
	'font-weight',
	options['--font-weight']
	? `var(--tw-font-weight, ${options['--font-weight']})`
	: undefined,
	),

As per the documentation, you can use theme tokens to configure some typographic property defaults alongside a font size, including letter-spacing and font-weight. These CSS variables then allow expected overriding. Tailwind Play example

[adamwathan]

Yep exactly, here's a demo:

https://play.tailwindcss.com/TZb7TkQM0E

[MikeLee0358]

Love both of your answers!

I am not use theme tokens, that's why I see the blow in tailwind playground

.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}

thank you both! and great work!