https://github.com/toolwind/tagged-combinators
https://github.com/toolwind/tagged-combinators
Last synced: 9 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/toolwind/tagged-combinators
- Owner: toolwind
- License: mit
- Created: 2025-10-12T15:34:25.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-12T17:15:33.000Z (9 months ago)
- Last Synced: 2026-06-03T04:33:39.589Z (22 days ago)
- Language: TypeScript
- Size: 188 KB
- Stars: 19
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Tagged Combinators for Tailwind CSS
[](https://bundlephobia.com/package/@toolwind/tagged-combinators)
[](https://github.com/brandonmcconnell/@toolwind/tagged-combinators/blob/main/LICENSE)
[](https://www.npmjs.com/package/@toolwind/tagged-combinators)
[](https://twitter.com/branmcconnell)
This plugin adds slash-modifier tagging support to Tailwind’s built-in child (`*:`) and descendant (`**:`) variants. Keep using them as usual, and optionally filter which children/descendants match using a plain selector via `/selector` — no arbitrary variants needed.
Examples: `*/option`, `**/.active`, `*/button[aria-label]`.
```html
- CSS
- Good
- Tailwind
- Better
test
```
Open this example in Tailwind Play: https://play.tailwindcss.com/0AXQLqxOqW
## Installation
First, install the package:
```bash
npm install @toolwind/tagged-combinators
```
Then add it to your Tailwind config:
Tailwind v4 (globals.css)
```css
@plugin "@toolwind/tagged-combinators";
```
Tailwind v3 (tailwind.config.js)
```js
module.exports = {
plugins: [require('@toolwind/tagged-combinators')],
}
```
## Why not just use arbitrary variants?
You can do this with Tailwind’s arbitrary variants, but the syntax is noisier:
```html
```
## Usage
### Basics
```html
…
…
…
…
…
```
You can tag most selectors (no bracket syntax required): tags, classes, attributes, etc.
```html
```
One exception is pseudo classes, as the `:` conflicts with Tailwind's own variant syntax.
## Notes
- Without a tag, `*:` compiles to `& > *` and `**:` compiles to `& *`. This syntax is built into Tailwind natively and this plugin preserves it without any conflicts.
- Tag using the slash modifier — no brackets needed: `*/button`, `**/.active`, `*/button:hover`.
---
I hope you find `@toolwind/tagged-combinators` a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request.
If you liked this, you might also like my other Tailwind CSS plugins:
* [@toolwind/signals](https://github.com/@toolwind/signals): Apply styles based on parent or ancestor state, a state-driven alterative to groups
* [@toolwind/multi](https://github.com/@toolwind/multi): Group utilities together by variant
* [@toolwind/mixins](https://github.com/@toolwind/mixins): Construct reusable & aliased sets of utilities inline
* [@toolwind/selector-patterns](https://github.com/@toolwind/selector-patterns): Dynamic CSS selector patterns
* [@toolwind/js](https://github.com/@toolwind/js): Effortless build-time JS script injection
* [@toolwind/directional-shadows](https://github.com/@toolwind/directional-shadows): Supercharge your shadow utilities with added directional support (includes directional `shadow-border` utilities too ✨)
* [@toolwind/default-shades](https://github.com/@toolwind/default-shades): Default shades for simpler color utility classes
* [@toolwind/lerp-colors](https://github.com/@toolwind/lerp-colors): Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes