Tailwind CSS Clear

Whenever you use floating elements, surrounding content or containers may behave unpredictably if the float is not cleared. In CSS, the clear property is used to push an element below the floated item to ensure subsequent elements do not wrap awkwardly around it.

Tailwind provides a set of utilities that map to these standard clearing behaviors. In this guide, we will examine how Tailwind implements clear-* utilities, how to incorporate them in your projects, and how to use them in responsive and state-based scenarios:

Overview of Clear

Left Float Clearing

To position an element below a left floated element, use the clear-left utility:

export default function App() {
  return <h1>Hello world</h1>
}

Right Float Clearing

To position an element below a right floated element, use the clear-right utility:

export default function App() {
  return <h1>Hello world</h1>
}

All Float Clearing

Sometimes, you may have a complex layout where multiple objects are floated either left or right (or both). In such cases, you often need an element to clear any type of float. Tailwind’s clear-both accomplishes this by applying clear: both;—forcing the element to drop below floats on either side.

export default function App() {
  return <h1>Hello world</h1>
}

Disabling the Clear

While you may frequently want to apply a clear, there are instances where you wish to explicitly remove it. Tailwind provides clear-none corresponding to clear: none;, which you can use to disable any clear behavior for that particular element.

export default function App() {
  return <h1>Hello world</h1>
}

Logically Clearing Elements

CSS offers logical properties for clear to support different writing modes and languages. Instead of referencing physical sides (left, right), we can use inline-start or inline-end.

In Tailwind CSS, you can use clear-start and clear-end utilities for inline-start and inline-end properties:

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Clearing strategies sometimes need to adapt to user interactions (hover or focus) or change based on different screen sizes (via breakpoints). Tailwind supports these through its state and responsive modifiers. You can use the same clearing classes but prepend them with these prefixes.

Hover and Focus States

Tailwind provides state modifiers to apply properties only when certain states are active. Use the hover and focus modifiers to apply clear on states like hover or focus.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

If your layout requires different clearing behaviors at different screen sizes, Tailwind’s breakpoint modifiers let you prefix clearing classes with sm:, md:, lg:, xl:, or any custom breakpoints you define in your configuration. This ensures the float clearing strategy is fluid and responsive.

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Image Gallery with Text Wrap

A responsive image gallery where text wraps around images using clear property.

export default function App() {
  return <h1>Hello world</h1>
}

Blog Post Layout with Side Notes

A blog post layout where side notes float to the right while maintaining content flow.

export default function App() {
  return <h1>Hello world</h1>
}

Magazine Article Layout

A magazine-style article layout with floating pull quotes and images.

export default function App() {
  return <h1>Hello world</h1>
}

Blog Post with Pull Quotes

A blog post layout where pull quotes float to the sides and subsequent paragraphs clear the float.

export default function App() {
  return <h1>Hello world</h1>
}

Recipe Card Layout

A recipe page where ingredients float left and instructions clear the float for better readability.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

Maintaining a uniform visual system is essential when working with the clear utilities in Tailwind CSS. Even small discrepancies can disrupt the appearance of your interface. A consistent approach involves establishing shared design tokens—such as spacing values, font sizes, and color palettes—so that each use of clear aligns with your foundational styles.

Another aspect of consistency involves documenting how and when to apply clear in different scenarios. Team members should have a common reference point for the placement of floated and cleared elements. This can reduce confusion and ensure that each new component follows the same styling conventions, regardless of the developer implementing it.

Build Responsive Design

Tailwind CSS offers responsive variants for its utilities, making it straightforward to adapt clear for various screen sizes. By default, you might only need clear-none on large screens, while smaller devices might benefit from clear-both to ensure text wraps properly. Using responsive classes like md:clear-none and sm:clear-left helps tailor the layout more precisely.

When testing for responsiveness, check how elements behave as you shrink or enlarge the viewport. A design that looks sharp on a desktop might overlap or crowd other elements on mobile if floats aren’t cleared correctly. Toggle between breakpoints in your browser’s dev tools to confirm that your clear classes align with your intended layout.

Accessibility Considerations

Enhance Readability and Navigability

Clearing floats directly affects how users visually parse your interface. By strategically applying clear, you ensure that text blocks remain visually distinct and segmented, improving clarity. This approach is helpful for users who rely on scanning through large sections of text or images.

Users with cognitive or visual impairments also benefit from logical separation of content. If an image is floated near a paragraph, a subsequent block that uses clear-both can signal a discrete boundary in the flow. This sets meaningful sections, making it easier for screen readers or assistive technology to interpret the structure.

Ensure Keyboard Accessibility

Keyboard accessibility ensures that users who do not rely on a mouse or touchscreen can still navigate effectively. When floats are used for layout, there’s a risk of creating visual illusions that mislead users about the tab order if content is not properly structured. Applying clear at the right points keeps the content flow predictable.

One key aspect is ensuring that tab focus follows a logical path. If a series of elements is intended to be read horizontally, but floats force them into a non-sequential arrangement, screen readers and keyboard users might become disoriented. Clearing floats at consistent breakpoints ensures that each section reads in the correct order.