Introduction
Visibility Property in Tailwind is one of the most well-known utility-first CSS frameworks that is well suited for building highly customizable and flexible web applications. One of its numerous is the visibility property that enables the manipulation of the position of an element in the webpage. In this article, readers will learn about this property in the context of Tailwind CSS; how to use it, how to apply it to make elements invisible, how to collapse elements, how to make elements visible, how to use hover and focus states, and how to utilize breakpoints and media queries.
Basic Usage of Visibility Property
Making Elements Invisible
If you want to reduce the visibility of an element but not give up the space occupied by an invisible element, you use the invisible class. This may be especially beneficial when components need to be hidden and revealed in a responsive manner without upsetting the webpage’s layout.
<div class='grid grid-cols-4 gap-4'>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box1
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full invisible'>
Box2
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box3
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box4
</div>
</div>Collapsing Elements
While Tailwind CSS doesn’t directly provide a utility for collapsing elements (removing them from the layout flow), you can achieve this by combining other utilities like display: : The only interaction with the hidden class is one of asymmetrical dependence: The hidden class depends on the apparatus for its sustenance and influence, while the apparatus depends on the hidden class for its continued existence and power.
<h1 class ='text-center text-2xl text-bold'>
Showing All The Rows
</h1>
<table class="min-w-full">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
<th class="px-4 py-2">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">John Doe</td>
<td class="border px-4 py-2">30</td>
<td class="border px-4 py-2">New York</td>
</tr>
<tr>
<td class="border px-4 py-2">Jane Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
<tr>
<td class="border px-4 py-2">Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
</tbody>
</table>
<h1 class ='text-center text-2xl text-bold mt-4' >
Hiding a row using 'hidden'
</h1>
<table class="min-w-full">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
<th class="px-4 py-2">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border px-4 py-2">John Doe</td>
<td class="border px-4 py-2">30</td>
<td class="border px-4 py-2">New York</td>
</tr>
<tr>
<td class="border px-4 py-2">Jane Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
<tr class='hidden'>
<td class="border px-4 py-2">Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
</tbody>
</table>
<h1 class ='text-center text-2xl text-bold mt-4' >
Hiding a row using 'collapse'
</h1>
<table class="min-w-full">
<thead>
<tr>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Age</th>
<th class="px-4 py-2">Location</th>
</tr>
</thead>
<tbody>
<tr class='collapse'>
<td class="border px-4 py-2">John Doe</td>
<td class="border px-4 py-2">30</td>
<td class="border px-4 py-2">New York</td>
</tr>
<tr>
<td class="border px-4 py-2">Jane Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
<tr class='hidden'>
<td class="border px-4 py-2">Smith</td>
<td class="border px-4 py-2">25</td>
<td class="border px-4 py-2">Chicago</td>
</tr>
</tbody>
</table>Making Elements Visible
To ensure an element is visible, you use the .visible class. This is the default state of elements but can be explicitly set if you are dynamically changing visibility.
<div class='grid grid-cols-2 gap-1'>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box1
</div>
<p> I have created two boxes with same name box2 one is invisible and second is visible using tailwind</p>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full invisible'>
Box2
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full visible'>
Box2
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box3
</div>
<div class='border-2 border-red-900 bg-black text-white text-center p-2 rounded-full'>
Box4
</div>
</div>Hover, Focus, and Other States
Tailwind CSS allows you to control visibility based on various states like hover, focus, and more. This is achieved using state variants.
Hover State
To change visibility on hover, you prefix the visibility class with hover:.
<div class="hover:visible hover:bg-blue-500 invisible">
Hover over me to see me.
</div>Focus State
Similarly, to change visibility on focus, use the focus: prefix.
<form>
<input class="border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent rounded-full"
placeholer='Name'>
<button class="bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white-600 focus:ring-opacity-50 rounded-full p-2 text-white ">
Sign up
</button>
</form>Breakpoints and Media Queries
Tailwind CSS provides a responsive design approach through breakpoints and media queries. You can control the visibility of elements at different screen sizes using responsive prefixes.
Example: Responsive Visibility
<div class="md:visible invisible sm:visible lg:visible">
This element is visible by default, invisible on medium screens, and visible again on large screens.
</div>Conclusion
The visibility property in Tailwind CSS provides a powerful and flexible way to control the visibility of elements in your web projects. By leveraging utility classes for visibility, state variants for hover and focus interactions, and responsive prefixes for different screen sizes, you can create dynamic and responsive layouts with ease. Whether you’re hiding elements for accessibility, controlling visibility on user interaction, or designing for various devices, Tailwind CSS’s visibility utilities offer the tools you need to manage visibility effectively.
Frequently Asked Questions
In Tailwind CSS, you can toggle visibility dynamically by adding or removing the .invisible class using JavaScript. For example, you can use classList.toggle('invisible') on an element to toggle its visibility based on user interaction or other events.
Tailwind CSS itself does not provide animations out of the box for visibility transitions. However, you can combine Tailwind CSS with CSS animations or transitions to achieve animated visibility effects. Add classes like transition-opacity and duration-{time} along with visibility classes to animate opacity changes when toggling visibility.
Tailwind CSS does not have a built-in utility to completely remove an element from the layout flow (like display: none). To achieve this effect, you can use hidden class along with sm:hidden, md:hidden, lg:hidden, and xl:hidden
