# tailwind-vscode
Are 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.
No, 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.
## How do I use it?
Add via your favorite package manager.
```bash
$ npm i -D @githubocto/tailwind-vscode
$ # or yarn, I ain't gonna judge
$ yarn add -D @githubocto/tailwind-vscode
```
Then add the plugin to your `tailwind.config.js`:
```js
module.exports = {
/* other config stuff here */
plugins: [require('@githubocto/tailwind-vscode')],
}
```
And style components!
```jsx
```
Doing a little celebratory dance in your chair is optional but encouraged.
The [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`).
## How does it work?
Webviews are exposed inside an `