0build.dev
Choose a layout

text-align

Report an Issue
Class Description

text-left

Sets text-align: left.

CSS Rules 

.text-left {
  text-align: left;
}

Usage 

<element class="text-left" />

Responsive

Prefix .text-left 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-left" />

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-left: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-left: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-left::before" />

<element class="content-after text-left::after" />
 .text-left Sets text-align: left.

text-center

Sets text-align: center.

CSS Rules 

.text-center {
  text-align: center;
}

Usage 

<element class="text-center" />

Responsive

Prefix .text-center 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-center" />

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-center: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-center: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-center::before" />

<element class="content-after text-center::after" />
 .text-center Sets text-align: center.

text-right

Sets text-align: right.

CSS Rules 

.text-right {
  text-align: right;
}

Usage 

<element class="text-right" />

Responsive

Prefix .text-right 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-right" />

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-right: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-right: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-right::before" />

<element class="content-after text-right::after" />
 .text-right Sets text-align: right.

text-justify

Sets text-align: justify.

CSS Rules 

.text-justify {
  text-align: justify;
}

Usage 

<element class="text-justify" />

Responsive

Prefix .text-justify 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-justify" />

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-justify: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-justify: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-justify::before" />

<element class="content-after text-justify::after" />
 .text-justify Sets text-align: justify.

text-start

Aligns text to the logical start edge (left in LTR, right in RTL) via text-align.

CSS Rules 

.text-start {
  text-align: start;
}

Usage 

<element class="text-start" />

Responsive

Prefix .text-start 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-start" />

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-start: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-start: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-start::before" />

<element class="content-after text-start::after" />
 .text-start Aligns text to the logical start edge (left in LTR, right in RTL) via text-align.

text-end

Aligns text to the logical end edge (right in LTR, left in RTL) via text-align.

CSS Rules 

.text-end {
  text-align: end;
}

Usage 

<element class="text-end" />

Responsive

Prefix .text-end 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-end" />

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-end: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-end: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-end::before" />

<element class="content-after text-end::after" />
 .text-end Aligns text to the logical end edge (right in LTR, left in RTL) via text-align.