Tailwind CSS Clear
This class accepts more than one value in Tailwind CSS. All the properties are covered in a class form. It is an alternative to the CSS clear property. This class is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element that is floated, it will. Basically, it is used for controlling the wrapping of content around an element.
Clear Classes
- clear-right
- clear-left
- clear-both
- clear-none
Tailwind css clear-left
Prevents floating elements on the left side.
<div class="p-8 ">
<div class="float-left bg-blue-500 text-white p-4">Floated Left</div>
<div class="clear-left bg-gray-200 text-black p-4">Cleared Left</div>
</div>Tailwind css clear-right
Prevents floating elements on the right side.
<div class="p-8 ">
<div class="float-right bg-blue-500 text-white p-4">Floated Right</div>
<div class="clear-right bg-gray-200 text-black p-4">Clears Right Float</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css clear-both
Prevents floating elements on both sides.
<div class="p-8 ">
<div class="float-left bg-blue-500 text-white p-4">Floated Left</div>
<div class="float-right bg-red-500 text-white p-4">Floated Right</div>
<div class="clear-both bg-gray-200 text-black p-4">Clears Both Floats</div>
</div>Tailwind css clear-none
Allows floating elements on both sides.
<div class="float-left bg-blue-500 text-white p-4">Floated Left</div>
<div class="float-right bg-red-500 text-white p-4">Floated Right</div>
<div class="clear-none bg-gray-200 text-black p-4">
No Clearing: Content flows normally.
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More