Tailwind CSS: Add lines to separate content (dividers).

Styling Common Web Page Parts

Add lines to separate content (dividers).

Skill ID: StylingCommonParts_22

Description: Create visual horizontal or vertical lines to break up sections.

Where to apply: Between articles on a homepage, in long forms.

Key Tailwind Classes:


       border-t


       border-l

Gotcha: Using a `<div>` with a tiny height (e.g., h-px ) and a background color (e.g., bg-gray-300 ) is often more flexible for horizontal dividers than just border-t on an existing element, especially for controlling spacing around the line.

Example Usage:

Horizontal Divider using border-t :

Some content above the divider.

Some content below the divider.

Horizontal Divider using h-px and bg-gray-300 (as mentioned in Gotcha):

Some content above the divider.

Some content below the divider.

Vertical Divider using border-l (within a flex container):

Left content.

Right content.

Note: The actual color, thickness, and style of borders can be controlled with other Tailwind utilities like border-gray-300 , border-2 , border-dashed etc. The classes border-t and border-l just specify which side the border appears on (top and left, respectively).

Tailwind CSS Concept Explained

Styling Common Web Page Parts

Add lines to separate content (dividers).

Example Usage:

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8: