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.

Tailwind CSS Clear Classes

• clear-left 
• clear-right 
• clear-both 
• clear-none 

clear-left Class

This class is used to specify that elements are not allowed to float on the left side in relation to another element.

Syntax:

<element class="clear-left">...</element>

Example:

Output:

clear-right Class

This class is used to specify that elements are not allowed to float on the right side in relation to another element.

Syntax:

<element class="clear-right">...</element>

Example:

Output:

clear-both Class

This class used to specify that floating elements are not allowed to float on both sides.

Syntax:

<element class="clear-both">...</element>

Example:

Output:

clear-none Class

This class is used to specify the default value. It allows elements to float on both sides.

Syntax:

<element class="clear-none">...</element>

Example: 

Output: