tailwindcss-focus-visible-within

This plugin allows you to target parent nodes with a child that has :focus-visible.

Installation

Install as dev-dependency using:

npm i -D tailwindcss-focus-visible-within

Tailwind CSS v4

Add the plugin to your style sheet:

@plugin "tailwindcss-focus-visible-within";

Tailwind CSS v3

Add the plugin to your tailwind.config.js:

module.exports = {
  theme: {
    // …
  },
  plugins: [
    require("tailwindcss-focus-visible-within")
    // …
  ],
}

Usage

You can apply Tailwind CSS classes to a parent node that has an element child with the focus-visible state.

<div class="focus-visible-within:…">

Demo

Tailwind Play

<div class="p-3 relative rounded-lg focus-visible-within:outline focus-visible-within:outline-2 focus-visible-within:outline-blue-600">
  <a href="#" class="font-semibold focus-visible:outline-none">
    Link title
    <span class="absolute inset-0"></span>
  </a>
  <p class="text-neutral-600">Link description</p>
</div>