Tailwind CSS Flex Element (flex Class)
The flex class is much responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.
Syntax:
<element display="flex">...</element>
Example 4:
<!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">
w3wiki
</h1>
<b>Tailwind CSS flex Class</b>
<div class="flex bg-green-200 p-4 mx-16 ">
<div class="flex-1 bg-green-500 rounded-lg">1</div>
<div class="flex-1 bg-green-500 rounded-lg">2</div>
<div class="flex-1 bg-green-500 rounded-lg">3</div>
</div>
</body>
</html>
Output:
Tailwind CSS Display
This class accepts more than one value in Tailwind CSS. All the properties are covered in a class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.