Tailwind CSS Clear

Last Updated : 11 Jun, 2024

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS clear Class</b></p>
    
    <div class="mx-10">
        <img class="float-left p-2 w-20 h-20" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <img class="float-right p-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <p class="text-justify clear-left">
            How many times were you frustrated while looking out
            for a good collection of programming/algorithm/interview
            questions? What did you expect and what did you get?
            This portal has been created to provide well written,
            well thought and well explained solutions for selected
            questions. An IIT Roorkee alumnus and founder of
            GeeksforGeeks. He loves to solve programming problems
            in most efficient ways. Apart from GeeksforGeeks, he
            has worked with DE Shaw and Co. as a software developer
            and JIIT Noida as an assistant professor.It is a good
            platform to learn programming. It is an educational
            website. Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe etc with
            a free online placement preparation course.
        </p>
    </div>
</body>

</html>

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS clear Class</b></p>

    <div class="mx-10">
        <img class="float-left p-2 w-20 h-20" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <img class="float-right p-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <p class="text-justify clear-right">
            How many times were you frustrated while looking out
            for a good collection of programming/algorithm/interview
            questions? What did you expect and what did you get?
            This portal has been created to provide well written,
            well thought and well explained solutions for selected
            questions. An IIT Roorkee alumnus and founder of
            GeeksforGeeks. He loves to solve programming problems
            in most efficient ways. Apart from GeeksforGeeks, he
            has worked with DE Shaw and Co. as a software developer
            and JIIT Noida as an assistant professor.It is a good
            platform to learn programming. It is an educational
            website. Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe etc with
            a free online placement preparation course.
        </p>
    </div>
</body>

</html>

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS clear Class</b></p>

    <div class="mx-10">
        <img class="float-left p-2 w-20 h-20" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <img class="float-right p-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <p class="text-justify clear-both">
            How many times were you frustrated while looking out
            for a good collection of programming/algorithm/interview
            questions? What did you expect and what did you get?
            This portal has been created to provide well written,
            well thought and well explained solutions for selected
            questions. An IIT Roorkee alumnus and founder of
            GeeksforGeeks. He loves to solve programming problems
            in most efficient ways. Apart from GeeksforGeeks, he
            has worked with DE Shaw and Co. as a software developer
            and JIIT Noida as an assistant professor.It is a good
            platform to learn programming. It is an educational
            website. Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe etc with
            a free online placement preparation course.
        </p>
    </div>
</body>

</html>

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <p><b>Tailwind CSS clear Class</b></p>

    <div class="mx-10">
        <img class="float-left p-2 w-20 h-20" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <img class="float-right p-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
        <p class="text-justify clear-none">
            How many times were you frustrated while looking out
            for a good collection of programming/algorithm/interview
            questions? What did you expect and what did you get?
            This portal has been created to provide well written,
            well thought and well explained solutions for selected
            questions. An IIT Roorkee alumnus and founder of
            GeeksforGeeks. He loves to solve programming problems
            in most efficient ways. Apart from GeeksforGeeks, he
            has worked with DE Shaw and Co. as a software developer
            and JIIT Noida as an assistant professor.It is a good
            platform to learn programming. It is an educational
            website. Prepare for the Recruitment drive of product
            based companies like Microsoft, Amazon, Adobe etc with
            a free online placement preparation course.
        </p>
    </div>
</body>

</html>

Output:

Tailwind CSS Object Fit

skyridetim

Improve

Article Tags :

Tailwind CSS Clear