Tailwind CSS - Layout

Previous
Quiz
Next

Tailwind CSS Layout consists of a list of utility classes based on the important topics to create an effective layout. It consists of topics related to element positioning, the floating of elements, Columns, Z index, Container, and more.

Tailwind CSS Layout Reference

Below mentioned topics can be used to create an effective Layout on elements.

Topic Description Example
Tailwind CSS - Aspect Ratio Aspect ratio is used to define the desired width and height of an element.
Tailwind CSS - Container Container is used to fix the element's width within different breakpoints.
Tailwind CSS - Columns Columns utility controls the number of columns within an element.
Tailwind CSS - Break After Break After is used to force a column break or page break after an element.
Tailwind CSS - Break Before Break Before is used to force a column break or page break before an element.
Tailwind CSS - Break Inside Break Inside provides a way through how a column or page should break within an element.
Tailwind CSS - Box Decoration Break Box Decoration Break demonstrates how decoration properties should be rendered across multiple lines, columns, or pages when elements are fragmented
Tailwind CSS - Box Sizing Box Sizing defines how an element's width and height calculated as elements total size
Tailwind CSS - Display Display is used to determine how elements are displayed in the document
Tailwind CSS - Float Float is used to control the flow of elements or content.
Tailwind CSS - Clear Clear is used to control the wrapping of content around an element
Tailwind CSS - Isolation Isolation is used to explicitly create a new stacking context
Tailwind CSS - Object Fit Object fit is used to adjust an image or video within its container
Tailwind CSS - Object Position Object Position is used to positioned an object within its container
Tailwind CSS - Overflow Overflow is used to handle content that is too large.
Tailwind CSS - Overscroll Behavior Overscroll Behavior is used to handle overflowed behavior of an element.
Tailwind CSS - Position Position is used to align elements in the Document Object Model
Tailwind CSS - Top/Right/Bottom/Left Top/Right/Bottom/Left is used to align the positioned elements.
Tailwind CSS - Visibility Visibility is used to control the visibility of elements.
Tailwind CSS - Z Index Z index is used to control the element's stacking order..

Example of Tailwind CSS Layout

Below examples will gives you brief idea about the the layout classes

Example 1

In the following example we will cover some of the above mentioned classes

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h1 class="text-2xl">
        Tailwind CSS Display- Inline-Block and Floats Class
    </h1>
    <h2 class="text-xl my-2
                text-violet-600">
        Display - Inline-block
    </h2>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block  h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    <h2 class="text-xl my-2 float-ri
                text-violet-600">
        Float Class On Inline-Block 
    </h2>
    
    <p>
        In this example we have used we have Float-right
        property with inline-block element which floated 
        those element in the right.
    </p>
    
    <div class="float-right mt-3">
        <li class="inline-block h-12  w-32
                    border-2 rounded p-1 
                    border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block h-12  w-32
                border-2 rounded p-1 
                border-fuchsia-700">
        Inline-Block 3
    </li>
    </div>
</body>

</html>

Example 2

In the following example we will cover Tailwind CSS Right-0 and Visibility classes.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl">
        Tailwind CSS Right-0 Class
    </h1>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 
                    w-9 h-9 bg-lime-700"></div>
    </div>
    
    <h2 class="text-2xl">
        Tailwind CSS Visibility class
    </h2>
    <p>
        In the following example Invisible class is 
        applied to the inner div which will hide it
        but it will take its space in the layout.
    </p>
    <div class="relative h-28 w-28 
                bg-lime-300 m-4">
        <div class="absolute right-0 invisible
                    w-9 h-9 bg-lime-700"></div>
    </div>
</body>
</html>
Print Page
Previous
Next