CODEWITHSUNDEEP
htmlcsslaraveltailwind-csspseudo-class
Riki Eprilion Saputra
Riki Eprilion Saputra

Reputation: 21

Group-focus not working on my code using tailwindcss

my group-focus isn't working but group-hover and group-active is working, i code this using laravel 9. any solution of this?

<nav id="nav-menu" class="lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none  hidden absolute py-5 bg-white shadow-lg rounded-lg max-w-[250px] w-full right-4 top-full">
                <ul class="block lg:flex">
                    <li class="group">
                        <a href="/" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500 group-active:text-slate-700">Home</a>
                    </li>
                    <li class="group">
                        <a href="/about" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500 group-focus:text-purple-400 group-active:text-pink-700">About</a>
                    </li>
                    <li class="group">
                        <a href="/blog" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500">Blog</a>
                    </li>
                    <li class="group">
                        <a href="/login" class="text-base text-black py-2 mx-8 flex group-hover:text-slate-500">Login</a>
                    </li>
                </ul>
            </nav>

Upvotes: 2

Views: 10244

Answers (2)

HyperActive
HyperActive

Reputation: 1316

try focus-within:text-purple-400 (if my understanding of the question is correct)

https://tailwindcss.com/docs/hover-focus-and-other-states#focus

Upvotes: 3

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14183

Parent element of link (<li> tag) is NOT focusable element. According to HTML Standard

An HTML user interface typically consists of multiple interactive widgets, such as form controls, scrollable regions, links, dialog boxes, browser tabs, and so forth. These widgets form a hierarchy, with some (e.g. browser tabs, dialog boxes) containing others (e.g. links, form controls).

<li> is not interactive therefore cannot be focused and that is why group-focus does nothing - the group is NOT focused (but link itself is focused). You may

  1. Change group-focus state of link to focus
// I removed all non-related classes

<li class="group">  
  <a href="/about" class="focus:text-purple-400">About</a>
</li>
  1. Make <li> focusable by using tabindex attribute
<li class="group" tabindex="0">  
  <a href="/about" class="group-focus:text-purple-400">About</a>
</li>

But I would not recommend second way because of WCAG (there is no need to make this element focusable)

Upvotes: 1

Related Questions