{"id":50886557,"url":"https://github.com/toolwind/tagged-combinators","last_synced_at":"2026-06-15T17:32:21.272Z","repository":{"id":351979082,"uuid":"1074845381","full_name":"toolwind/tagged-combinators","owner":"toolwind","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-12T17:15:33.000Z","size":192,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-03T04:33:39.589Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toolwind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-12T15:34:25.000Z","updated_at":"2025-11-16T00:32:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/toolwind/tagged-combinators","commit_stats":null,"previous_names":["toolwind/tagged-combinators"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/toolwind/tagged-combinators","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toolwind%2Ftagged-combinators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toolwind%2Ftagged-combinators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toolwind%2Ftagged-combinators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toolwind%2Ftagged-combinators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toolwind","download_url":"https://codeload.github.com/toolwind/tagged-combinators/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toolwind%2Ftagged-combinators/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34374146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-15T17:32:18.613Z","updated_at":"2026-06-15T17:32:21.260Z","avatar_url":"https://github.com/toolwind.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTagged Combinators for Tailwind CSS\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![minified size](https://img.shields.io/bundlephobia/min/@toolwind/tagged-combinators)](https://bundlephobia.com/package/@toolwind/tagged-combinators)\n[![license](https://img.shields.io/github/license/brandonmcconnell/@toolwind/tagged-combinators?label=license)](https://github.com/brandonmcconnell/@toolwind/tagged-combinators/blob/main/LICENSE)\n[![version](https://img.shields.io/npm/v/@toolwind/tagged-combinators)](https://www.npmjs.com/package/@toolwind/tagged-combinators)\n[![twitter](https://img.shields.io/twitter/follow/branmcconnell)](https://twitter.com/branmcconnell)\n\n\u003c/div\u003e\n\nThis 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.\n\nExamples: `*/option`, `**/.active`, `*/button[aria-label]`.\n\n```html\n\u003cdiv class=\"*:border-2 *:border-blue-500 */ol:bg-red-100 */ul:bg-green-100 odd:**/li:font-bold\"\u003e\n  \u003cul class=\"\"\u003e\n    \u003cli\u003eCSS\u003c/li\u003e\n    \u003cli\u003eGood\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003col\u003e\n    \u003cli\u003eTailwind\u003c/li\u003e\n    \u003cli\u003eBetter\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n\u003cdiv class=\"*/button[aria-label]:italic\"\u003e\n  \u003cbutton type=\"button\" aria-label\u003etest\u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"**/span.active:text-violet-500\"\u003e\n  \u003cspan class=\"active\"\u003etest\u003c/span\u003e\n\u003c/div\u003e\n```\nOpen this example in Tailwind Play: https://play.tailwindcss.com/0AXQLqxOqW\n\n## Installation\n\nFirst, install the package:\n\n```bash\nnpm install @toolwind/tagged-combinators\n```\n\nThen add it to your Tailwind config:\n\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd width=\"10000\"\u003e\n\u003cdetails name=\"enabling-tagged-combinators\" open\u003e\n\n\u003csummary\u003e\u0026nbsp;\u0026nbsp;\u003cstrong\u003eTailwind v4 (\u003ccode\u003eglobals.css\u003c/code\u003e)\u003c/strong\u003e\u003c/summary\u003e\u003cbr\u003e\n\n```css\n@plugin \"@toolwind/tagged-combinators\";\n```\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd width=\"10000\"\u003e\n\u003cdetails name=\"enabling-tagged-combinators\"\u003e\n\n\u003csummary\u003e\u0026nbsp;\u0026nbsp;\u003cstrong\u003eTailwind v3 (\u003ccode\u003etailwind.config.js\u003c/code\u003e)\u003c/strong\u003e\u003c/summary\u003e\u003cbr\u003e\n\n```js\nmodule.exports = {\n  plugins: [require('@toolwind/tagged-combinators')],\n}\n```\n\n\u003c/details\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Why not just use arbitrary variants?\n\nYou can do this with Tailwind’s arbitrary variants, but the syntax is noisier:\n\n```html\n\u003c!-- Arbitrary variants --\u003e\n\u003cdiv class=\"[\u0026\u003e*]:text-sm [\u0026\u003eoption]:font-bold [\u0026_span.active]:text-violet-500\"\u003e\u003c/div\u003e\n\n\u003c!-- Tagged combinators (this plugin) --\u003e\n\u003cdiv class=\"*:text-sm */option:font-bold **/span.active:text-violet-500\"\u003e\u003c/div\u003e\n```\n\n## Usage\n\n### Basics\n\n```html\n\u003c!-- Direct children (all) --\u003e\n\u003cdiv class=\"*:text-sm\"\u003e…\u003c/div\u003e \u003c!-- \u0026 \u003e * --\u003e\n\n\u003c!-- Direct children (filtered) --\u003e\n\u003cdiv class=\"*/button:text-sm\"\u003e…\u003c/div\u003e \u003c!-- \u0026 \u003e button --\u003e\n\u003cdiv class=\"*/.primary:text-sm\"\u003e…\u003c/div\u003e \u003c!-- \u0026 \u003e .primary --\u003e\n\n\u003c!-- Any descendants --\u003e\n\u003csection class=\"**:mt-2\"\u003e…\u003c/section\u003e \u003c!-- \u0026 * --\u003e\n\u003csection class=\"**/input:mt-2\"\u003e…\u003c/section\u003e \u003c!-- \u0026 input --\u003e\n\u003csection class=\"**/.active:underline\"\u003e…\u003c/section\u003e \u003c!-- \u0026 .active --\u003e\n```\n\nYou can tag most selectors (no bracket syntax required): tags, classes, attributes, etc.\n\n```html\n\u003cdiv class=\"*/button:hover:text-red-600\"\u003e\u003c/div\u003e\n\u003cdiv class=\"**/a.active:underline\"\u003e\u003c/div\u003e\n```\n\nOne exception is pseudo classes, as the `:` conflicts with Tailwind's own variant syntax.\n\n## Notes\n\n- Without a tag, `*:` compiles to `\u0026 \u003e *` and `**:` compiles to `\u0026 *`. This syntax is built into Tailwind natively and this plugin preserves it without any conflicts.\n- Tag using the slash modifier — no brackets needed: `*/button`, `**/.active`, `*/button:hover`.\n\n---\n\nI 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.\n\nIf you liked this, you might also like my other Tailwind CSS plugins:\n* [@toolwind/signals](https://github.com/@toolwind/signals): Apply styles based on parent or ancestor state, a state-driven alterative to groups\n* [@toolwind/multi](https://github.com/@toolwind/multi): Group utilities together by variant\n* [@toolwind/mixins](https://github.com/@toolwind/mixins): Construct reusable \u0026 aliased sets of utilities inline\n* [@toolwind/selector-patterns](https://github.com/@toolwind/selector-patterns): Dynamic CSS selector patterns\n* [@toolwind/js](https://github.com/@toolwind/js): Effortless build-time JS script injection\n* [@toolwind/directional-shadows](https://github.com/@toolwind/directional-shadows): Supercharge your shadow utilities with added directional support (includes directional `shadow-border` utilities too ✨)\n* [@toolwind/default-shades](https://github.com/@toolwind/default-shades): Default shades for simpler color utility classes\n* [@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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoolwind%2Ftagged-combinators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoolwind%2Ftagged-combinators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoolwind%2Ftagged-combinators/lists"}