Display Block Flex Grid Hidden in TailwindCSS
?? Display Utilities in Tailwind CSS
Tailwind provides utility classes to control the CSS display property, letting you quickly switch between different layout behaviors like block, flex, grid, or hiding elements.
Common Display Utilities
| Tailwind Class | CSS Equivalent | Description |
|---|---|---|
block | display: block; | Element behaves as a block |
inline-block | display: inline-block; | Inline-level block container |
inline | display: inline; | Inline element |
flex | display: flex; | Flexbox container |
inline-flex | display: inline-flex; | Inline flex container |
grid | display: grid; | Grid container |
inline-grid | display: inline-grid; | Inline grid container |
hidden | display: none; | Hide the element |
Usage Examples
1. Block
<div class="block bg-blue-200 p-4"> This is a block element.</div>2. Flex Container
<div class="flex space-x-4 bg-gray-100 p-4"> <div class="p-2 bg-blue-400">Item 1</div> <div class="p-2 bg-blue-600">Item 2</div></div>3. Grid Container
<div class="grid grid-cols-3 gap-4 p-4"> <div class="bg-green-300 p-2">Grid 1</div> <div class="bg-green-500 p-2">Grid 2</div> <div class="bg-green-700 p-2">Grid 3</div></div>4. Hide Element
<div class="hidden"> This content is hidden.</div>Responsive Display
You can control display responsively with prefixes:
<div class="block md:flex lg:grid hidden sm:block"> Responsive display example</div>If you'd like, I can show you examples combining these with other Tailwind utilities!
