• 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-neutralModifierRenders the divider line with a ’neutral’ color.
divider-primaryModifierRenders the divider line with a ‘primary’ color.
divider-secondaryModifierRenders the divider line with a ‘secondary’ color.
divider-accentModifierRenders the divider line with an ‘accent’ color.
divider-successModifierRenders the divider line with a ‘success’ color.
divider-warningModifierRenders the divider line with a ‘warning’ color.
divider-infoModifierRenders the divider line with an ‘info’ color.
divider-errorModifierRenders the divider line with an ’error’ color.
divider-dashedModifierRenders the divider line with a dashed pattern.
divider-dottedModifierRenders the divider line with a dotted pattern.
divider-verticalResponsivePositions elements vertically (default).
divider-horizontalResponsivePositions elements horizontally.
divider-startResponsiveAligns the divider text to the start.
divider-endResponsiveAligns the divider text to the end.

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-t-* for vertical dividers and border-e-* 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.