font-size

font-size

Sets font-size via --font-size. E.g. 2rem, 18px.

CSS Rules

.font-size {
  font-size: var(--font-size);
}

Usage

<element class="font-size" style="--font-size: /* value */;" />

Responsive

Prefix .font-size utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:font-size" style="--md-font-size: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="font-size:hover" style="--font-size-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="font-size:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before font-size::before" style="--font-size-before: /* value */;" />

<element class="content-after font-size::after" style="--font-size-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="font-size=value" />

<!-- Output -->
<element class="font-size" style="--font-size: value;" />

text-xs

Sets font-size to xs preset.

CSS Rules

.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--font-size-xs);
}

Usage

<element class="text-xs" />

Responsive

Prefix .text-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-xs::before" />

<element class="content-after text-xs::after" />

text-sm

Sets font-size to sm preset.

CSS Rules

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--font-size-sm);
}

Usage

<element class="text-sm" />

Responsive

Prefix .text-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-sm::before" />

<element class="content-after text-sm::after" />

text-base

Sets font-size to base preset. The default body text size.

CSS Rules

.text-base {
  font-size: var(--font-size-base);
  line-height: var(--font-size-base);
}

Usage

<element class="text-base" />

Responsive

Prefix .text-base utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-base" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-base:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-base:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-base::before" />

<element class="content-after text-base::after" />

text-lg

Sets font-size to lg preset.

CSS Rules

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--font-size-lg);
}

Usage

<element class="text-lg" />

Responsive

Prefix .text-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-lg::before" />

<element class="content-after text-lg::after" />

text-xl

Sets font-size to xl preset.

CSS Rules

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

Usage

<element class="text-xl" />

Responsive

Prefix .text-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-xl::before" />

<element class="content-after text-xl::after" />

text-2xl

Sets font-size to 2xl preset.

CSS Rules

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

Usage

<element class="text-2xl" />

Responsive

Prefix .text-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-2xl::before" />

<element class="content-after text-2xl::after" />

text-3xl

Sets text to 3xl size and line height.

CSS Rules

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

Usage

<element class="text-3xl" />

Responsive

Prefix .text-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-3xl::before" />

<element class="content-after text-3xl::after" />

text-4xl

Sets font-size to 4xl preset.

CSS Rules

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

Usage

<element class="text-4xl" />

Responsive

Prefix .text-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-4xl::before" />

<element class="content-after text-4xl::after" />

text-5xl

Sets text to 5xl size and line height.

CSS Rules

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

Usage

<element class="text-5xl" />

Responsive

Prefix .text-5xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-5xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-5xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-5xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-5xl::before" />

<element class="content-after text-5xl::after" />

text-6xl

Sets text to 6xl size and line height.

CSS Rules

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

Usage

<element class="text-6xl" />

Responsive

Prefix .text-6xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-6xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-6xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-6xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-6xl::before" />

<element class="content-after text-6xl::after" />

text-7xl

Sets text to 7xl size and line height.

CSS Rules

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

Usage

<element class="text-7xl" />

Responsive

Prefix .text-7xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-7xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-7xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-7xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-7xl::before" />

<element class="content-after text-7xl::after" />

text-8xl

Sets text to 8xl size and line height.

CSS Rules

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

Usage

<element class="text-8xl" />

Responsive

Prefix .text-8xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-8xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-8xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-8xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-8xl::before" />

<element class="content-after text-8xl::after" />

text-9xl

Sets text to 9xl size and line height.

CSS Rules

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

Usage

<element class="text-9xl" />

Responsive

Prefix .text-9xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:text-9xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="text-9xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="text-9xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before text-9xl::before" />

<element class="content-after text-9xl::after" />