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 plugin, though. Not gonna lie, it's pretty fantastic.

How do I use it?

Add via your favorite package manager.

$ 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:

module.exports = {
  /* other config stuff here */
  plugins: [require('@githubocto/tailwind-vscode')],
}

And style components!

<input className='bg-vscode-input-background text-vscode-input-foreground border-vscode-input-border focus:border-vscode-inputOption-activeBorder'/>

Doing a little celebratory dance in your chair is optional but encouraged.

The VS Code theme colors 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 <iframe>. If you open the webview's developer tools and inspect the <html>, you'll see a style property with a honking large list of CSS custom properties, also known by their rapper name, "variables".

These 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.

Only, once you get used to Tailwind-y everything, using those color variables is quite jarring.

This plugin creates a vscode Tailwind color object with definitions for every VS Code theme color.

You could map these variables manually, like so:

module.exports = {
  theme: {
    extend: {
      colors: {
        vscode: {
          'contrastBorder': 'var(--vscode-contrastBorder)',
          'focusBorder': 'var(--vscode-focusBorder)',
          'foreground': 'var(--vscode-foreground)',
          'widget-shadow': 'var(--vscode-widget-shadow)'
          /* … and 500 more */

But this is tedious. Use this plugin and spend your time on loftier pursuits.

License

MIT

FAQs

What is @githubocto/tailwind-vscode?

Is @githubocto/tailwind-vscode popular?

Is @githubocto/tailwind-vscode well maintained?

Package last updated on 21 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install