Setting font-size and line-height using theme function?

[mryechkin]

I'm looking at utilizing the theme function in our design system's CSS files, and I'm a bit confused on how properties like font-size and line-height are supposed to work?

For example theme('fontSize.xl') returns ["1.25rem", {lineHeight: "1.75rem"}] - am I understanding correctly that I can't just write font-size: theme('fontSize.xl') in my CSS? And how would I set line-height separately while still using theme tokens?

Any insight would be appreciated!

[wongjn]

[…] am I understanding correctly that I can't just write font-size: theme('fontSize.xl') in my CSS?

You can! Here's the test that indicates this is the intended behavior:

tailwindcss/tests/evaluateTailwindFunctions.test.js

Lines 535 to 565 in 94d6e72

	test('font sizes are retrieved without default line-heights or letter-spacing', () => {
	let input = css`
	.heading-1 {
	font-size: theme('fontSize.lg');
	}
	.heading-2 {
	font-size: theme('fontSize.xl');
	}
	`
	let output = css`
	.heading-1 {
	font-size: 20px;
	}
	.heading-2 {
	font-size: 24px;
	}
	`
	return run(input, {
	theme: {
	fontSize: {
	lg: ['20px', '28px'],
	xl: ['24px', { lineHeight: '32px', letterSpacing: '-0.01em' }],
	},
	},
	}).then((result) => {
	expect(result.css).toMatchCss(output)
	expect(result.warnings().length).toBe(0)
	})
	})

And how would I set line-height separately while still using theme tokens?

You should be able to reference a line-height value via the lineHeight key, which corresponds to the resolved theme.lineHeight values, i.e. theme(lineHeight.normal)

[bezin]

It has been some time, but the second bit is still unanswered, because the suggested way does not work:

.foo {
  font-size: theme('fontSize.xl');
  line-height: theme('fontSize.xl.lineHeight'); // this will not work
}

The given error is: 'fontSize.xl.lineHeight' does not exist in your themne config. 'fontSize.xl' has the following valid keys: 0.

Is there any way to get the corresponding line-height to a font-size in my CSS via the theme function?

[wongjn]

Yes, the line height would be declared in the second element of the font size array value, so you'd reference it like theme('fontSize.xl.1.lineHeight'). See this Tailwind Play of it working (open the Generated CSS panel).

[adamwathan]

This will be a lot better in v4 👍

.foo {
  font-size: var(--font-size-xl);
  line-height: var(--font-size-xl--line-height);
}

[bezin]

Yes, I found that out eventually, but the error message specifically stated that there only is element 0 (no element 1).

v4 syntax certainly looks way better 👍