{"id":16837572,"url":"https://github.com/needim/radix-ui-themes-with-tailwind","last_synced_at":"2025-03-17T04:33:15.756Z","repository":{"id":189804682,"uuid":"681249003","full_name":"needim/radix-ui-themes-with-tailwind","owner":"needim","description":"Radix UI Themes Integration with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2023-12-28T22:33:46.000Z","size":924,"stargazers_count":48,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-16T08:22:54.511Z","etag":null,"topics":["radix-ui","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://needim.github.io/radix-ui-themes-with-tailwind/","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/needim.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"needim","patreon":"needim"}},"created_at":"2023-08-21T15:40:45.000Z","updated_at":"2025-03-06T13:56:54.000Z","dependencies_parsed_at":"2023-08-21T21:23:11.891Z","dependency_job_id":"cff44f5b-5c95-42b4-8f61-770d1523a205","html_url":"https://github.com/needim/radix-ui-themes-with-tailwind","commit_stats":null,"previous_names":["needim/radix-ui-themes-with-tailwind"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Fradix-ui-themes-with-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Fradix-ui-themes-with-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Fradix-ui-themes-with-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/needim%2Fradix-ui-themes-with-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/needim","download_url":"https://codeload.github.com/needim/radix-ui-themes-with-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243975018,"owners_count":20377490,"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":["radix-ui","tailwind","tailwindcss"],"created_at":"2024-10-13T12:17:52.432Z","updated_at":"2025-03-17T04:33:15.298Z","avatar_url":"https://github.com/needim.png","language":"TypeScript","funding_links":["https://github.com/sponsors/needim","https://patreon.com/needim"],"categories":[],"sub_categories":[],"readme":"# Radix UI Themes Integration with Tailwind CSS\n\n## Key Features\n\n- **Tailwind Color Naming**: You have the option to utilize the Tailwind naming convention for colors and radius helpers. This means you can still use familiar classes like `bg-red-500` and `bg-blue-500`, which will be linked to corresponding Radix colors.\n\n- **Color Token Mapping**: Another optional feature allows you to map missing color tokens from Tailwind to Radix colors. For example, you can map tailwind `zinc` to radix `sand` and tailwind `neutral` to radix `sage`, enabling a seamless transition between the two color systems.\n\n## Usage\n\n```bash\npnpm install radix-ui-themes-with-tailwind -D\n```\n\nor\n\n```bash\nnpm install radix-ui-themes-with-tailwind -D\n```\n\nor\n\n```bash\nyarn add radix-ui-themes-with-tailwind -D\n```\n\nthen in your `tailwind.config.js` or `tailwind.config.ts` file:\n\n```js\nimport radixThemePlugin from \"radix-ui-themes-with-tailwind\";\n\nexport default {\n  darkMode: [\"class\"],\n  content: [],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n    radixThemePlugin({\n      useTailwindColorNames: true, // optional\n      useTailwindRadiusNames: true, // optional\n      mapMissingTailwindColors: true, // optional\n    }),\n  ],\n};\n```\n\n## Frequently Asked Questions\n\n**What Are Radix Themes?**\n\nRadix Themes serve as a styled and opinionated component library built on top of the Radix UI primitives. They are designed to expedite project initiation with pre-designed, extensively tested components. (source: [Radix UI Twitter](https://twitter.com/radix_ui/status/1692574289860477432))\n\n**Is This Plugin Necessary for Using Radix Themes?**\n\nNo, the plugin is not mandatory. If you're accustomed to Tailwind and prefer not to use Radix Themes' layout utilities (such as `\u003cBox /\u003e`, `\u003cFlex /\u003e`, `\u003cGrid /\u003e`), you can still develop using Tailwind classes (e.g., `className=\"flex items-center gap-2\"`).\n\n## Acknowledgements\n\n- [Radix UI Themes](https://www.radix-ui.com/)\n- [Radix UI Colors](https://www.radix-ui.com/colors)\n- [Tailwind CSS](https://tailwindcss.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedim%2Fradix-ui-themes-with-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneedim%2Fradix-ui-themes-with-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneedim%2Fradix-ui-themes-with-tailwind/lists"}