tw-var

Extract CSS Variables from Tailwind CSS.

Usage

By default all colors (apart from lightBlue) and spacing are printed. Combine tw-var and piping like this:

npx tw-var > style.css

See style.css for the above output. To reduce the number of colors, use HEX, add a prefix, and turn off spacing:

npx tw-var colors=green,trueGray color-space=hex prefix=tw- spacing=false > style.css

Why?

Tailwind CSS is ideal for projects without an established design system. Colors, spacings, and font sizes usually need some coherence in order to look good and Tailwind CSS has great defaults.

That said, the overhead can be off putting. It isn't always straight forward to setup and utility classes aren't for everyone.

tw-var extracts these definitions from Tailwind CSS so they can be used in CSS Variables. In other words, instead of:

<p class="text-red-500">Hello world</p>

The following is possible:

<style>
  p {
    color: rgb(var(--c-red-500));
  }
</style>

<p>Hello world</p>

When colors are defined as RGB the alpha value can be manipulated. For example, create a focus ring for all buttons and inputs:

:root {
  --focus-ring: 0 0 0 2px rgb(var(--c-blue-500) / 50%);
}

button:focus,
input:focus {
  box-shadow: var(--focus-ring);
}