Focus, active and other states
Hover isn't the only state supported by Tailwind CSS.
Thanks to Tailwind we can use directly in our HTML any state available in regular CSS.
Below are examples of several pseudo-class states supported in Tailwind CSS.
You don't have to try to memorize them now, we'll cover them in detail in the next lessons. For now, just be aware of their existence so you won't be surprised if you spot them in some Tailwind Elements component.
Focus: Applied when an element has the focus. It is
also enabled by default in Tailwind CSS. The modifier used is
Active: Applied when an element is being activated by
the user. The modifier used is
Visited: Applied once a user has visited a link. The
modifier used is
Disabled: Applied when an element is disabled. The
modifier used is
Group-hover and group-focus: These are special states
in Tailwind CSS that are used to apply styles to one element when
another element is hovered or focused. They are typically used with the
grouputility class. The modifiers used are
First-child and last-child: Applied to the first or
last child of its parent. The modifiers used are
Even and odd: Applied to even or odd children of its
parent. The modifiers used are
Dark: Applied when dark mode is active. The modifier
Placeholder: Applied to style placeholder text in form
inputs. The modifier used is
Checked: Applied when a checkbox or radio button is
checked. The modifier used is
Focus-within: Applied when an element itself has focus
or contains an element that has focus. The modifier used is
Using multiple states
There is no problem in Tailwind if you want to use multiple states in one element.
A good example is a simple button that must handle both hover, focus, active, dark, and sometimes other states.
And here is the button code:
<a href="#" target="_blank" role="button" data-te-ripple-init data-te-ripple-color="light" class="mb-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"> Primary </a>
I know, it looks disturbing. The amount of classes in HTML raises concerns about being too cluttered, but it's another thing you just have to get used to in Tailwind.
Anyway, note that we can apply any modifiers to our button to handle any states.
We just add them side by side:
<div class="bg-blue-500 hover:bg-red-400 focus:bg-yellow-600 active:bg-green-700"> Random element </div>
Multiple states in the Navbar
Take another look at the Navbar in our project.
When you hover over a link on the left or an icon on the right, the color
will change. However, when you move the cursor away, the color returns to
its original. Thanks to the
However, if you click on a specific link or icon and then move the cursor
away, the changed color will remain the same until you unclick somewhere
else on the page. Thanks to the
So if you look closely at the sample link in our Navbar, you'll see that we use different modifiers here to handle different states:
<a class="text-neutral-500 hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400" href="#" data-te-nav-link-ref >Dashboard</a >
You probably noticed there, in addition to modifiers such as
active:, also the modifier
It is used to support the famous dark mode, which we will deal with in the next lesson.
Co Founder at Tailwind Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.