0build.dev
Choose a layout

font-weight

Report an Issue
Class Description

font-black

Sets font-weight: 900.

CSS Rules 

.font-black {
  font-weight: 900;
}

Usage 

<element class="font-black" />

Responsive

Prefix .font-black 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-black" />

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-black: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="font-black: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-black::before" />

<element class="content-after font-black::after" />
 .font-black Sets font-weight: 900.

font-bold

Sets font-weight: 700.

CSS Rules 

.font-bold {
  font-weight: 700;
}

Usage 

<element class="font-bold" />

Responsive

Prefix .font-bold 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-bold" />

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-bold: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="font-bold: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-bold::before" />

<element class="content-after font-bold::after" />
 .font-bold Sets font-weight: 700.

font-extrabold

Sets the font weight to extrabold (800).

CSS Rules 

.font-extrabold {
  font-weight: 800;
}

Usage 

<element class="font-extrabold" />

Responsive

Prefix .font-extrabold 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-extrabold" />

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-extrabold: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="font-extrabold: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-extrabold::before" />

<element class="content-after font-extrabold::after" />
 .font-extrabold Sets the font weight to extrabold (800).

font-extralight

Sets the font weight to extralight (200).

CSS Rules 

.font-extralight {
  font-weight: 200;
}

Usage 

<element class="font-extralight" />

Responsive

Prefix .font-extralight 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-extralight" />

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-extralight: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="font-extralight: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-extralight::before" />

<element class="content-after font-extralight::after" />
 .font-extralight Sets the font weight to extralight (200).

font-light

Sets font-weight: 300.

CSS Rules 

.font-light {
  font-weight: 300;
}

Usage 

<element class="font-light" />

Responsive

Prefix .font-light 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-light" />

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-light: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="font-light: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-light::before" />

<element class="content-after font-light::after" />
 .font-light Sets font-weight: 300.

font-medium

Sets font-weight: 500.

CSS Rules 

.font-medium {
  font-weight: 500;
}

Usage 

<element class="font-medium" />

Responsive

Prefix .font-medium 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-medium" />

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-medium: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="font-medium: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-medium::before" />

<element class="content-after font-medium::after" />
 .font-medium Sets font-weight: 500.

font-normal

Sets font-weight: 400.

CSS Rules 

.font-normal {
  font-weight: 400;
}

Usage 

<element class="font-normal" />

Responsive

Prefix .font-normal 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-normal" />

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-normal: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="font-normal: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-normal::before" />

<element class="content-after font-normal::after" />
 .font-normal Sets font-weight: 400.

font-semibold

Sets font-weight: 600.

CSS Rules 

.font-semibold {
  font-weight: 600;
}

Usage 

<element class="font-semibold" />

Responsive

Prefix .font-semibold 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-semibold" />

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-semibold: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="font-semibold: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-semibold::before" />

<element class="content-after font-semibold::after" />
 .font-semibold Sets font-weight: 600.

font-thin

Sets font-weight: 100.

CSS Rules 

.font-thin {
  font-weight: 100;
}

Usage 

<element class="font-thin" />

Responsive

Prefix .font-thin 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-thin" />

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-thin: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="font-thin: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-thin::before" />

<element class="content-after font-thin::after" />
 .font-thin Sets font-weight: 100.