{"id":13630371,"url":"https://github.com/benface/tailwindcss-children","last_synced_at":"2025-04-17T13:32:17.921Z","repository":{"id":34905656,"uuid":"188720274","full_name":"benface/tailwindcss-children","owner":"benface","description":"Tailwind CSS plugin to add variants that target child elements","archived":true,"fork":false,"pushed_at":"2022-02-22T12:00:33.000Z","size":1223,"stargazers_count":141,"open_issues_count":12,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-01T22:45:54.449Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benface.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-26T18:53:49.000Z","updated_at":"2024-03-05T11:40:54.000Z","dependencies_parsed_at":"2022-08-08T02:15:58.424Z","dependency_job_id":null,"html_url":"https://github.com/benface/tailwindcss-children","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-children","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-children/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-children/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-children/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benface","download_url":"https://codeload.github.com/benface/tailwindcss-children/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223757468,"owners_count":17197561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-01T22:01:40.419Z","updated_at":"2024-11-08T21:31:43.162Z","avatar_url":"https://github.com/benface.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ⛔️ DEPRECATED\n\nThis plugin doesn’t work properly with Tailwind 3.0. Please use [`tailwind-children`](https://github.com/SamGoody/tailwind-children) instead. Thank you!\n\n# Children Variant Plugin for Tailwind CSS\n\n## Requirements\n\nThis plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 1.x version of this plugin (`npm install tailwindcss-children@1.x`).\n\n## Installation\n\n```bash\nnpm install tailwindcss-children\n```\n\n## Usage\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  variants: {\n    display: ['children', 'default', 'children-first', 'children-last', 'children-odd', 'children-even', 'children-not-first', 'children-not-last', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'children-visited', 'visited', 'children-disabled', 'disabled', 'responsive'],\n  },\n  plugins: [\n    require('tailwindcss-children'),\n  ],\n};\n```\n\nThe above configuration would generate the following CSS:\n\n```css\n.children\\:block \u003e * {\n  display: block;\n}\n\n.block {\n  display: block;\n}\n\n.children\\:first\\:block \u003e :first-child {\n  display: block;\n}\n\n.children\\:last\\:block \u003e :last-child {\n  display: block;\n}\n\n.children\\:odd\\:block \u003e :nth-child(odd) {\n  display: block;\n}\n\n.children\\:even\\:block \u003e :nth-child(even) {\n  display: block;\n}\n\n.children\\:not-first\\:block \u003e :not(:first-child) {\n  display: block;\n}\n\n.children\\:not-last\\:block \u003e :not(:last-child) {\n  display: block;\n}\n\n.children\\:hover\\:block \u003e :hover {\n  display: block;\n}\n\n.hover\\:block:hover {\n  display: block;\n}\n\n.children\\:focus\\:block \u003e :focus {\n  display: block;\n}\n\n.focus\\:block:focus {\n  display: block;\n}\n\n.children\\:focus-within\\:block \u003e :focus-within {\n  display: block;\n}\n\n.focus-within\\:block:focus-within {\n  display: block;\n}\n\n.children\\:active\\:block \u003e :active {\n  display: block;\n}\n\n.active\\:block:active {\n  display: block;\n}\n\n.children\\:visited\\:block \u003e :visited {\n  display: block;\n}\n\n.visited\\:block:visited {\n  display: block;\n}\n\n.children\\:disabled\\:block \u003e :disabled {\n  display: block;\n}\n\n.disabled\\:block:disabled {\n  display: block;\n}\n\n/* etc. */\n```\n\nWhich you can then use in your HTML like this:\n\n```html\n\u003cul class=\"children:block children:not-first:border-t children:border-gray children:hover:bg-gray\"\u003e\n  \u003cli\u003e\n    First item\n  \u003c/li\u003e\n  \u003cli\u003e\n    Second item\n  \u003c/li\u003e\n  \u003cli\u003e\n    Last item, this one doesn't have a bottom border\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nYou can also override `children:` classes on specific children if needed:\n\n```html\n\u003cul class=\"children:block children:bg-gray\"\u003e\n  \u003cli\u003e\n    First item\n  \u003c/li\u003e\n  \u003cli class=\"bg-red\"\u003e\n    Second item, this one has a red background\n  \u003c/li\u003e\n  \u003cli class=\"bg-blue\"\u003e\n    Third item, this one has a blue background\n  \u003c/li\u003e\n  \u003cli\u003e\n    Last item\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nThe above depends on the order of the generated CSS, so make sure to add the `default` variant *after* the `children` one in the array of variants (as well as the `hover` variant after the `children-hover` variant if you want to override a `children:hover:*` utility, etc.).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-children","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenface%2Ftailwindcss-children","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-children/lists"}