Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Flexbox & Grid

Quiz

Tailwind CSS Flexbox and Grid is a layout module that efficiently aligns items within a flex or grid container. It consists of a list of utility classes that enable the effective construction of flex and grid containers such as flex-basis, flex grow, flex shrink, grid-template-columns,grid-auto-rows, gap, and many more..

Tailwind CSS Flexbox & Grid Reference

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

Topic	Description	Example
Tailwind CSS - Flex Basis	Flex Basis is used to define the initial size of flex items.	Try It
Tailwind CSS - Flex Direction	Flex Direction is used to set the direction of flex items within a flex container.	Try It
Tailwind CSS - Flex Wrap	Flex Wrap utility controls whether flex items wrap to a new line or not.	Try It
Tailwind CSS - Flex	Flex class specifies how flex items both grow and shrink within a flex container.	Try It
Tailwind CSS - Flex Grow	Flex Grow class specifies how flex items grow within a flex container.	Try It
Tailwind CSS - Flex Shrink	Flex Shrink class specifies how flex items shrink within a flex container.	Try It
Tailwind CSS - Order	Order Class specifies the order of flex and grid items within its container.	Try It
Tailwind CSS - Grid Template Columns	Grid Template Columns class specifies the number and size of columns in a grid layout.	Try It
Tailwind CSS - Grid Column Start/End	Grid Column Start/End class specifies the arrangement and size of columns across grid columns	Try It
Tailwind CSS - Grid Template Row	Grid Template Row specifies the number and size of rows in a grid layout.	Try It
Tailwind CSS - Grid Row Start/End	Grid Row Start/End class specifies the arrangement and size of rows across grid rows	Try It
Tailwind CSS - Grid Auto Flow	Grid Auto Flow class specifies the automatic alignment of an element in a grid layout.	Try It
Tailwind CSS - Grid Auto Columns	grid auto columns class specifies the size of grid columns that are created implicitly.	Try It
Tailwind CSS - Grid Auto Rows	Grid Auto Rows specifies the size of grid rows that are created implicitly.	Try It
Tailwind CSS - Gap	Gap class is used to add space between grid and flex items.	Try It
Tailwind CSS - Justify Content	Justify Content is used to align flex and grid items along the main axis or horizontal plane.	Try It
Tailwind CSS - Justify Items	Justify Items is used to align grid items along their inline axis or horizontal alignment of grid items within their grid cells.	Try It
Tailwind CSS - Justify Self	Justify self class is used to align individual grid items along its inline axis.	Try It
Tailwind CSS - Align Content	Align Content is used to positioned rows in a multi-row flex container and grid container along the cross axis.	Try It
Tailwind CSS - Align Items	Align Items is used to position flex and grid items along the containers cross-axis.	Try It
Tailwind CSS - Align Self	Align Self is used to align individual grid and flex items along its container's cross axis.	Try It
Tailwind CSS - Place Content	Place content class is used to justify and align content simultaneously	Try It
Tailwind CSS - Place Items	Place Items class is used to justify and align items simultaneously	Try It
Tailwind CSS - Place Self	Place self class is used to justify and align individual items simultaneously	Try It

Example of Tailwind CSS Flexbox

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

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Flexbox Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Flex, Flex-wrap, Gap, and 
        Order classes. 
        
    </p>
    <div class="flex flex-wrap gap-2 mb-4">
        <div class="bg-red-500 p-4 w-32 h-28 order-5">Item 1</div>
        <div class="bg-blue-500 p-4 w-32 h-28 order-4">Item 2</div>
        <div class="bg-green-500 p-4 w-32 h-28 order-3">Item 3</div>
        <div class="bg-yellow-500 p-4 w-32 h-28 order-2">Item 4</div>
        <div class="bg-orange-500 p-4 w-32 h-28 order-1">Item 5</div>
    </div>
</body>
</html>

Example of Tailwind CSS Grid

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

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Grid Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Grid, Grid-template-column, Gap, 
        and Place-items classes. 
    </p>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>
</html>

Print Page