{"id":24743205,"url":"https://github.com/programming-with-ia/tailwindcss-shadcn-utilities","last_synced_at":"2026-02-12T23:33:39.218Z","repository":{"id":262643719,"uuid":"887932742","full_name":"programming-with-ia/tailwindcss-shadcn-utilities","owner":"programming-with-ia","description":"A Tailwind CSS plugin for ShadCN that provides utility classes for combining background and foreground colors based on ShadCN themes","archived":false,"fork":false,"pushed_at":"2024-11-19T10:38:58.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-21T00:44:39.359Z","etag":null,"topics":["color-utilities","plugin","shadcn","shadcn-tailwind-plugin","shadcn-utilites","tailwindcss","tailwindcss-plugin","tailwindcss-shadcn-utilities","utilites"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-shadcn-utilities","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/programming-with-ia.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}},"created_at":"2024-11-13T14:30:33.000Z","updated_at":"2024-11-19T10:39:01.000Z","dependencies_parsed_at":"2025-01-28T01:44:54.230Z","dependency_job_id":null,"html_url":"https://github.com/programming-with-ia/tailwindcss-shadcn-utilities","commit_stats":null,"previous_names":["programming-with-ia/tailwindcss-shadcn-utilities"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/programming-with-ia/tailwindcss-shadcn-utilities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Ftailwindcss-shadcn-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Ftailwindcss-shadcn-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Ftailwindcss-shadcn-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Ftailwindcss-shadcn-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/programming-with-ia","download_url":"https://codeload.github.com/programming-with-ia/tailwindcss-shadcn-utilities/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/programming-with-ia%2Ftailwindcss-shadcn-utilities/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29386222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T22:07:52.078Z","status":"ssl_error","status_checked_at":"2026-02-12T22:07:49.026Z","response_time":55,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["color-utilities","plugin","shadcn","shadcn-tailwind-plugin","shadcn-utilites","tailwindcss","tailwindcss-plugin","tailwindcss-shadcn-utilities","utilites"],"created_at":"2025-01-28T01:34:45.641Z","updated_at":"2026-02-12T23:33:39.201Z","avatar_url":"https://github.com/programming-with-ia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003csvg width=\"100px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"\u003e\u003cpath d=\"M5.3 11.8c-2.2 3-2.1 6 .3 9-.7-2.2-.3-4 1.2-5.2.9-.7 1.9-.9 3.1-1 1.9-.3 4.2-.6 6.3-3.4 2.2-3 2.1-6-.3-9 .7 2.2.3 4-1.2 5.2-.9.7-1.9.9-3.1 1-2 .3-4.3.6-6.3 3.4z\" fill=\"#06b6d4\"/\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"m7.5 22 12.8-11.5\"/\u003e\u003c/svg\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eTailwindcss Shadcn Utilities\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA plugin for Tailwind CSS v3.2+ that provides utility classes for combining background and foreground colors based on ShadCN themes. This allows you to apply consistent color combinations for elements like buttons, cards, popovers, and more with a single CSS class.\n\u003c/p\u003e\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install tailwindcss-shadcn-utilities -D\n```\n\n```sh\npnpm add tailwindcss-shadcn-utilities -D\n```\n\n```sh\nyarn add tailwindcss-shadcn-utilities --dev\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require(\"tailwindcss-shadcn-utilities\"),\n    // ...\n  ],\n};\n```\n\n## Usage\n\nAfter adding the plugin, you can use the following utility classes to apply both background and foreground colors in one go:\n\n| ~~Normal Use~~                               | with `tailwindcss-shadcn-utilities` |\n| -------------------------------------------- | ----------------------------------- |\n| `bg-card text-card-foreground`               | `card`                              |\n| `bg-popover text-popover-foreground`         | `popover`                           |\n| `bg-primary text-primary-foreground`         | `primary`                           |\n| `bg-secondary text-secondary-foreground`     | `secondary`                         |\n| `bg-muted text-muted-foreground`             | `muted`                             |\n| `bg-accent text-accent-foreground`           | `accent`                            |\n| `bg-destructive text-destructive-foreground` | `destructive`                       |\n\n### Example\n\n```html\n\u003cdiv class=\"card p-4 rounded-lg\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n\n\u003cbutton class=\"primary md:secondary\"\u003eButton\u003c/button\u003e\n\n\u003cbutton class=\"secondary hover:primary\"\u003eButton\u003c/button\u003e\n\n\u003cdiv class=\"popover p-4\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\nThese utility classes will automatically apply both background and text colors based on the ShadCN UI theme.\n\n## License\n\n`tailwindcss-shadcn-utilities` is open-source and licensed under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-ia%2Ftailwindcss-shadcn-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogramming-with-ia%2Ftailwindcss-shadcn-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-ia%2Ftailwindcss-shadcn-utilities/lists"}