{"id":15386270,"url":"https://github.com/konnorrogers/tailwindcss-plugin-custom-elements","last_synced_at":"2025-09-03T10:33:27.047Z","repository":{"id":218274333,"uuid":"746032804","full_name":"KonnorRogers/tailwindcss-plugin-custom-elements","owner":"KonnorRogers","description":"A set of tailwind plugins for working with custom element selects such as ::part() and :state()","archived":false,"fork":false,"pushed_at":"2025-08-04T17:47:51.000Z","size":49,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-04T20:57:13.783Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/KonnorRogers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-01-20T21:45:35.000Z","updated_at":"2025-08-04T17:47:54.000Z","dependencies_parsed_at":"2024-01-20T21:54:36.177Z","dependency_job_id":"c06d2733-3760-47c1-8b3f-a1ebdac5e0b2","html_url":"https://github.com/KonnorRogers/tailwindcss-plugin-custom-elements","commit_stats":null,"previous_names":["konnorrogers/tailwindcss-plugin-custom-elements"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/KonnorRogers/tailwindcss-plugin-custom-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KonnorRogers%2Ftailwindcss-plugin-custom-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KonnorRogers%2Ftailwindcss-plugin-custom-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KonnorRogers%2Ftailwindcss-plugin-custom-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KonnorRogers%2Ftailwindcss-plugin-custom-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KonnorRogers","download_url":"https://codeload.github.com/KonnorRogers/tailwindcss-plugin-custom-elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KonnorRogers%2Ftailwindcss-plugin-custom-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273430547,"owners_count":25104481,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"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":"2024-10-01T14:48:31.809Z","updated_at":"2025-09-03T10:33:27.040Z","avatar_url":"https://github.com/KonnorRogers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Purpose\n\nMake the `::part()` and `::state()` CSS selectors for Shadow DOM easier to work with.\n\n`::part()`: \u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/::part\u003e\n\n`:state()`: \u003chttps://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states\u003e\n\nHere's a primer as to why this is nice:\n\n\u003chttps://konnorrogers.com/posts/2023/web-components-tailwind-and-ssr/#consuming-web-components-with-tailwind\u003e\n\n## Installation\n\n```bash\nnpm install tailwindcss-plugin-custom-elements\n```\n\n## Adding the plugin\n\n```js\nimport {\n  PartPlugin,\n  StatePlugin\n} from 'tailwindcss-plugin-custom-elements'\n\nexport default {\n  plugins: [\n    PartPlugin(), // Adds `part-[name]:` pseudo-selector\n    StatePlugin(), // Adds `state-[name]:` pseudo-selector\n  ]\n}\n```\n\n## Syntax\n\nThe basic syntaxes are:\n\n`part-[{{ partName }}]:{{ otherStuff }}`\n\n`state-[{{ stateName }}]:{{ otherStuff }}`\n\n## Example\n\nHere's an example where we set the background-color to `red-500` on a shadow root part with the name of `\"base\"`,\nand then on `:state(valid)`, we change the background color to `green-500`\n\n```html\n\u003cmy-web-component class=\"part-[base]:bg-red-500 state-[valid]:bg-green-500\"\u003e\n  \u003cShadowRoot\u003e\n    \u003cdiv part=\"base\"\u003e\u003c/div\u003e\n  \u003c/ShadowRoot\u003e\n\u003c/my-web-component\u003e\n```\n\nGenerated selectors:\n\n```css\n\u0026::part(base).bg-red-500 { background-color: theme(\"colors.red.500\"); }\n\u0026:state(valid):bg-green-500 { background-color: theme(\"colors.green.600\"); }\n```\n\n## Additional notes\n\nOrder matters. If for some reason a part isn't being applied as expected, make sure things are in the correct order.\n`::state()` and `::part()` is a pseudo-element and does not accept all possible pseudo-selectors / pseudo-elements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonnorrogers%2Ftailwindcss-plugin-custom-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonnorrogers%2Ftailwindcss-plugin-custom-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonnorrogers%2Ftailwindcss-plugin-custom-elements/lists"}