benface/tailwindcss-gradients

[object Object] instead of color

pavelloz opened this issue · 5 comments

pavelloz commented

Is it me or something is wrong with some of the classes?
The transparent/black/white are generated:

.bg-gradient-t-black {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), #000);
}

But other colors are not:

.bg-gradient-b-red {
  background-image: linear-gradient(transparent, [object Object]);
}

I didnt fiddle much with default tailwind colors. Im using:

    "tailwindcss": "^1.1.2",
    "tailwindcss-gradients": "^2.3.0"
hacknug commented

How does your config file look like? Looks to me like you're getting [object Object] because your red color is an object, not a string.

Probably a bug and something that should be supported given that's how the default Tailwind palette is specified. Try to use flat to flatten the object like I do here.

pavelloz commented

Ouh, red was just an example, its the same for purple, yellow.

All my color customizations are under namespace to avoid conflicts like you described.

My config looks like this:


const brandColors = {
  'light-green': '#14ddaa',
  'mid-green': '#179c7b',
  'dark-green': '#2b322b',
  'soft-grey': '#f0f3f6',
  'mid-grey': '#ced8e1',
  grey: '#7b838a',
  'dark-grey': '#333333'
};

const systemColors = {
  blue: '#007aff',
  'light-blue': '#5bc8fa',
  red: '#ff3a30',
  orange: '#ff9e0b',
  yellow: '#ffd70b',
  purple: '#bf59f2'
};

module.exports = {
  theme: {
    extend: {
      colors: {
        gs: {
          ...brandColors,
          ...systemColors
        }
      },
...

gs part makes tailwind to generate classes like text-gs-...

pavelloz commented

Anyway, since i needed only one simple gradient i just inlined it, so its not a problem/blocker, just wanted to report just in case its a bug in a version combination.

Ouh, forgot to write also postcss version: 7.0.17

benface commented

Yeah looks like a bug to me! Thanks for reporting, will fix ASAP.

benface commented

Fixed in v2.3.1

  • ❤️1