new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

font-size/utilities

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

text-sm utility class

The text-sm utility class sets font-size to 0.875rem (14px) and line-height to calc(1.25 / 0.875). It uses CSS custom properties: font-size: var(--text-sm) and line-height: var(--text-sm--line-height).

text-base utility class

The text-base utility class sets font-size to 1rem (16px) and line-height to calc(1.5 / 1). It uses CSS custom properties: font-size: var(--text-base) and line-height: var(--text-base--line-height).

text-lg utility class

The text-lg utility class sets font-size to 1.125rem (18px) and line-height to calc(1.75 / 1.125). It uses CSS custom properties: font-size: var(--text-lg) and line-height: var(--text-lg--line-height).

text-7xl utility class

The text-7xl utility class sets font-size to 4.5rem (72px) and line-height to 1. It uses CSS custom properties: font-size: var(--text-7xl) and line-height: var(--text-7xl--line-height).

text-9xl utility class

The text-9xl utility class sets font-size to 8rem (128px) and line-height to 1. It uses CSS custom properties: font-size: var(--text-9xl) and line-height: var(--text-9xl--line-height).

text-(length:<custom-property>) syntax

The text-(length:<custom-property>) syntax allows setting font-size to a custom CSS property: font-size: var(<custom-property>).

text-[<value>] arbitrary value syntax

The text-[<value>] syntax allows setting an arbitrary font-size value: font-size: <value>.

Setting line-height with font-size utilities

Font-size utilities support a slash notation to set line-height at the same time. Use utilities like text-sm/6, text-sm/7, or text-sm/8 to apply a font size and line-height together.

text-size/number syntax for font-size and line-height

The text-<size>/<number> utility sets both font-size and line-height at the same time. It produces font-size: <size> and line-height: calc(var(--spacing) * <number>). For example, text-sm/6 sets font-size to the small size and line-height to calc(var(--spacing) * 6).

text-size/custom-property syntax

The text-<size>/(<custom-property>) utility sets both font-size and line-height using a custom CSS property. It produces font-size: <size> and line-height: var(<custom-property>).

text-size/arbitrary-value syntax

The text-<size>/[<value>] utility sets both font-size and line-height with an arbitrary value. It produces font-size: <size> and line-height: <value>.

Font size utilities have default line heights

Each font size utility in Tailwind CSS has a default line height set automatically when no line height is explicitly provided. The customization of these default values is covered in the font-size documentation.

Example: text-sm/6, text-sm/7, text-sm/8 combined font-size and line-height

Example showing text-sm/6, text-sm/7, and text-sm/8 classes applied to paragraph elements to demonstrate different line heights with a small font size.

Give your agent this brain