• content
  • Divider

content

Tailwind CSS Divider

A divider is employed to separate content either vertically or horizontally.

Class Name
Type
Description
dividerComponentBase class for divider components.
divider-dashedStyleRenders the divider line with a dashed pattern.
divider-dottedStyleRenders the divider line with a dotted pattern.
divider-neutralColorRenders the divider line with a ’neutral’ color.
divider-primaryColorRenders the divider line with a ‘primary’ color.
divider-secondaryColorRenders the divider line with a ‘secondary’ color.
divider-accentColorRenders the divider line with an ‘accent’ color.
divider-successColorRenders the divider line with a ‘success’ color.
divider-warningColorRenders the divider line with a ‘warning’ color.
divider-infoColorRenders the divider line with an ‘info’ color.
divider-errorColorRenders the divider line with an ’error’ color.
divider-endPlacementAligns the divider text to the end.
divider-startPlacementAligns the divider text to the start.
divider-verticalDirectionPositions elements vertically (default).
divider-horizontalDirectionPositions elements horizontally.

Variants

Vertical divider

Utilize the component class divider to create vertical content divisions. Apply the modifier class divider-{semantic-color} to specify different colors for the dividers.

Horizontal divider

Use the responsive class divider-horizontal with the component class divider to create horizontal content divisions.

With content (horizontal)

Add text or icon within the divider markup to show it within the horizontal divider line.

With content (vertical)

Insert icons or text into the divider markup following the examples below to display them within the divider line.

Styles

Default

The following example represents the default style for the divider line.

Dotted

Apply the modifier class divider-dotted to display the divider line in a dotted pattern.

Dashed

Apply the modifier class divider-dashed to display the divider line in a dashed pattern.

Custom thickness

Utilize the TailwindCSS state classes after: and before: along with the border classes border-e-* for vertical dividers and border-t-* for horizontal dividers to customize their thickness.

Content positions

Vertical divider content

Use the responsive classes divider-start and divider-end to position content at the start and end positions, respectively. By default, the content is centered.

Horizontal divider content

Use the responsive classes divider-start and divider-end to position content at the start and end positions in horizontal divider, respectively. By default, the content is centered.

Illustrations

Responsive

The responsive dividers adapt according to breakpoints.

Horizontally

Use TailwindCSS classes for responsive design, such as sm:, md:, lg:, xl:, and 2xl:, along with the responsive class divider-horizontal, to switch the divider alignment to horizontal at specific breakpoints.

Vertically

Utilize responsive breakpoint classes alongside the responsive class divider-vertical to adjust the divider alignment to vertical at specific breakpoints.

Buttons with divider

Use the example below to implement buttons with a responsive horizontal divider.

Buttons with vertical divider

Use the example below to implement buttons with a vertical divider.