{"id":20224943,"url":"https://github.com/githubocto/tailwind-vscode","last_synced_at":"2025-09-10T18:50:06.195Z","repository":{"id":57113447,"uuid":"355055122","full_name":"githubocto/tailwind-vscode","owner":"githubocto","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-21T14:08:44.000Z","size":57,"stargazers_count":33,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-14T12:56:14.535Z","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/githubocto.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":"2021-04-06T04:22:15.000Z","updated_at":"2024-06-19T19:07:31.007Z","dependencies_parsed_at":"2024-06-19T19:07:27.681Z","dependency_job_id":"2995fde7-8698-42c1-b1dd-8badf9279a65","html_url":"https://github.com/githubocto/tailwind-vscode","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"0d9e47cc5148da85c6a2783dd0fa23f63165de98"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Ftailwind-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Ftailwind-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Ftailwind-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/githubocto%2Ftailwind-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/githubocto","download_url":"https://codeload.github.com/githubocto/tailwind-vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248255725,"owners_count":21073370,"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-11-14T07:09:57.475Z","updated_at":"2025-04-10T16:50:29.566Z","avatar_url":"https://github.com/githubocto.png","language":"JavaScript","readme":"# tailwind-vscode\n\nAre you authoring VS Code extensions with webviews? Step right up! This is a plugin for Tailwind that exposes VS Code's theme colors as Tailwind colors — with all of the variants (`bg`, `text`, `border`, etc…) Now you can author styles for your extension's webviews with Tailwind and use the active VS Code theme colors.\n\nNo, this is not a plugin for VS Code! Your absolutely should check out the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin, though. Not gonna lie, it's pretty fantastic.\n\n## How do I use it?\n\nAdd via your favorite package manager. \n\n```bash\n$ npm i -D @githubocto/tailwind-vscode\n$ # or yarn, I ain't gonna judge\n$ yarn add -D @githubocto/tailwind-vscode\n```\n\nThen add the plugin to your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  /* other config stuff here */\n  plugins: [require('@githubocto/tailwind-vscode')],\n}\n```\n\nAnd style components!\n\n```jsx\n\u003cinput className='bg-vscode-input-background text-vscode-input-foreground border-vscode-input-border focus:border-vscode-inputOption-activeBorder'/\u003e\n```\n\nDoing a little celebratory dance in your chair is optional but encouraged.\n\nThe [VS Code theme colors](https://code.visualstudio.com/api/references/theme-color) are represented as Tailwind colors under `vscode`, with hyphens subtituted for periods (`foo.bar` → `foo-bar`).\n\n## How does it work?\n\nWebviews are exposed inside an `\u003ciframe\u003e`. If you open the webview's developer tools and inspect the `\u003chtml\u003e`, you'll see a style property with a honking large list of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known by their rapper name, \"variables\".\n\nThese are injected by VS Code, and contain the style colors defined by the active VS Code theme. When a user changes the theme, the variables change. Voilà, themeability inside webviews.\n\nOnly, once you get used to Tailwind-y everything, using those color variables is quite jarring.\n\nThis plugin creates a `vscode` Tailwind [color object](https://tailwindcss.com/docs/customizing-colors#color-object-syntax) with definitions for every [VS Code theme color](https://code.visualstudio.com/api/references/theme-color). \n\nYou could map these variables manually, like so:\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        vscode: {\n          'contrastBorder': 'var(--vscode-contrastBorder)',\n          'focusBorder': 'var(--vscode-focusBorder)',\n          'foreground': 'var(--vscode-foreground)',\n          'widget-shadow': 'var(--vscode-widget-shadow)'\n          /* … and 500 more */\n```\n\nBut this is tedious. Use this plugin and spend your time on loftier pursuits.\n\n## License\n\nMIT\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubocto%2Ftailwind-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithubocto%2Ftailwind-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithubocto%2Ftailwind-vscode/lists"}