https://github.com/cloudnode-pro/tailwindcss-focus-visible-within
Simplifies targeting parent nodes with a child that has `:focus-visible` using TailwindCSS
https://github.com/cloudnode-pro/tailwindcss-focus-visible-within
css tailwind tailwind-css tailwindcss tailwindcss-plugin
Last synced: 5 months ago
JSON representation
Simplifies targeting parent nodes with a child that has `:focus-visible` using TailwindCSS
- Host: GitHub
- URL: https://github.com/cloudnode-pro/tailwindcss-focus-visible-within
- Owner: cloudnode-pro
- License: mit
- Created: 2024-03-20T10:08:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-09T08:03:41.000Z (over 1 year ago)
- Last Synced: 2024-09-28T13:42:35.100Z (over 1 year ago)
- Topics: css, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```sh
npm i -D tailwindcss-focus-visible-within
```
### Tailwind CSS v4
Add the plugin to your style sheet:
```css
@plugin "tailwindcss-focus-visible-within";
```
### Tailwind CSS v3
Add the plugin to your `tailwind.config.js`:
```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.
```html
```
## Demo
[**Tailwind Play**](https://play.tailwindcss.com/KvDscGgo76)
```html
```