@githubocto/tailwind-vscode

v1.0.5

Published

a year ago

Defines Tailwind color classes for VS Code extension colors

Downloads

640

0High
0Medium
0Low

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

tailwind-vscode

How do I use it?

How does it work?

License