tailwindcss-var

Tailwind's missing variables plugin.

Basic color change

Define your object once with text-varcolor-600, bg-varcolor-50 etc.
Fill the variable (dynamically) with e. g. varcolor-pink.
text-varcolor-600 renders as text-pink-600, bg-varcolor-50 renders as bg-pink-50.

Try yourself in Tailwind CSS Playground.

1
2
3
              <button class="varcolor-pink text-varcolor-600 bg-varcolor-50 border-varcolor-600 hover:bg-varcolor-100 focus:ring-varcolor-500 ...">
  ...
</button>

Hierarchy and subvalues

Variables are automatically consumable by every child element.
You can overwrite variables in every child.
You can overwrite single variants of the variable with other colors or opacities.

Try yourself in Tailwind CSS Playground.

1
2
3
4
5
6
              <div class="varcolor-pink text-varcolor-600 bg-varcolor-50 border-varcolor-600 hover:bg-varcolor-100 focus:ring-varcolor-500 ...">
  <button class="text-white bg-varcolor-600 border-varcolor-800 hover:bg-varcolor-700 focus:ring-varcolor-500 ...">Primary</button>
  <button class="text-varcolor-600 bg-varcolor-50 border-varcolor-600 hover:bg-varcolor-100 focus:ring-varcolor-500 ...">Secondary</button>
  <button class="text-varcolor-600 bg-varcolor-50 border-varcolor-50 hover:bg-varcolor-100 focus:ring-varcolor-500 ...">Tertiary</button>
  <button class="varcolor-600-pink/20 text-varcolor-600 bg-varcolor-50 border-varcolor-50 ...">Disabled</button>
</div>

Spacings

Besides color variables you can set variables for spacings.
You can use the variables for width, height, margins etc.

Try yourself in Tailwind CSS Playground.

1
2
3
4
5
6
              <div class="varspacing-8
            sm:varspacing-12
            md:varspacing-16
            lg:varspacing-24
            w-varspacing h-varspacing ..."
></div>

< sm

Arbitrary Values

You can set and use arbitrary values for both spacings and colors.
In the example below height and roundedness resize perfectly with the width of the object.

Try yourself in Tailwind CSS Playground.

1
2
3
4
5
6
7
8
              <div class="varspacing-[21px]
            sm:varspacing-12
            md:varspacing-16
            lg:varspacing-24
            rounded-[calc(var(--tw-varspacing)*0.2)]
            h-[calc(var(--tw-varspacing)*1.2)]
            w-varspacing ..."
></div>

< sm