Skip to content

toolwind/tagged-combinators

Repository files navigation

Tagged Combinators for Tailwind CSS

minified size license version twitter

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].

<div class="*:border-2 *:border-blue-500 */ol:bg-red-100 */ul:bg-green-100 odd:**/li:font-bold">
  <ul class="">
    <li>CSS</li>
    <li>Good</li>
  </ul>
  <ol>
    <li>Tailwind</li>
    <li>Better</li>
  </ol>
</div>
<div class="*/button[aria-label]:italic">
  <button type="button" aria-label>test</button>
</div>
<div class="**/span.active:text-violet-500">
  <span class="active">test</span>
</div>

Open this example in Tailwind Play: https://play.tailwindcss.com/0AXQLqxOqW

Installation

First, install the package:

npm install @toolwind/tagged-combinators

Then add it to your Tailwind config:

  Tailwind v4 (globals.css)
@plugin "@toolwind/tagged-combinators";
  Tailwind v3 (tailwind.config.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:

<!-- Arbitrary variants -->
<div class="[&>*]:text-sm [&>option]:font-bold [&_span.active]:text-violet-500"></div>

<!-- Tagged combinators (this plugin) -->
<div class="*:text-sm */option:font-bold **/span.active:text-violet-500"></div>

Usage

Basics

<!-- Direct children (all) -->
<div class="*:text-sm"></div> <!-- & > * -->

<!-- Direct children (filtered) -->
<div class="*/button:text-sm"></div> <!-- & > button -->
<div class="*/.primary:text-sm"></div> <!-- & > .primary -->

<!-- Any descendants -->
<section class="**:mt-2"></section> <!-- & * -->
<section class="**/input:mt-2"></section> <!-- & input -->
<section class="**/.active:underline"></section> <!-- & .active -->

You can tag most selectors (no bracket syntax required): tags, classes, attributes, etc.

<div class="*/button:hover:text-red-600"></div>
<div class="**/a.active:underline"></div>

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:

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published