TW Elements - Focus, active and other states. Free UI/UX design course

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 TW Elements component.

Focus: Applied when an element has the focus. It is also enabled by default in Tailwind CSS. The modifier used is focus:
Active: Applied when an element is being activated by the user. The modifier used is active:
Visited: Applied once a user has visited a link. The modifier used is visited:
Disabled: Applied when an element is disabled. The modifier used is disabled:
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 group utility class. The modifiers used are group-hover: and group-focus: respectively.
First-child and last-child: Applied to the first or last child of its parent. The modifiers used are first: and last:
Even and odd: Applied to even or odd children of its parent. The modifiers used are even: and odd:
Dark: Applied when dark mode is active. The modifier used is dark:
Placeholder: Applied to style placeholder text in form inputs. The modifier used is placeholder:
Checked: Applied when a checkbox or radio button is checked. The modifier used is checked:
Focus-within: Applied when an element itself has focus or contains an element that has focus. The modifier used is focus-within:

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; HTML:

<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 colour will change. However, when you move the cursor away, the colour returns to its original. Thanks to the hover: modifier.

However, if you click on a specific link or icon and then move the cursor away, the changed colour will remain the same until you unclick somewhere else on the page. Thanks to the focus: modifier.

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 focus: or active:, also the modifier dark:

It is used to support the famous dark mode, which we will deal with in the next lesson.