No css variable fallback support.

[mpalpha]

Versions:

• Package Version: ?.?.?
• Tailwindcss Version: ?.?.?

Description:

CSS variable fallback not supported.
e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/var#syntax

Steps To Reproduce:

Try to use css fallbacks as per spec.

/* Fallback */
/* In the component's style: */
.component .header {
  color: var(--header-color, blue); /* header-color isn't set, and so remains blue, the fallback value */
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application's style: */
.component {
  --text-color: #080;
}

• …

[mpalpha]

Great plugin, but I can't use it currently due to this limitation.

[mertasan]

Hey Jason, thanks!

I made a few additions for Fallbacks. v2.2.0

You have to set the variables in the config file.

https://tailwindcss.com/docs/plugins#adding-components

Or you can use it like this:

// tailwind.config.js
...
theme: {
  colors: {
    blue: {
      400: 'var(--header-color, blue)',
    }
  },
  variables: {
    DEFAULT: {
      header: {
        color: '#0075ff',
      }
    }
  }
}
...

.component .header {
  @apply text-blue-400;
}

Please check this: ee42258

or
fallback.test.js
fallback.test.css
fallback.test.html