Usage in HTML?

[rowild]

Thank you for providing the plugin, but to me it is still not clear how to use a gradient in the HTML code. Could you please provide some examples in the docu? Thank you!

EDIT:
It would also be great, if you could provide examples for how to define more then one "linearGradients".
The example use 2 "colors" keys, one for the definition of colors (what, if those are in "extend"?) and another one in the "linearGradients" definition. It is confusing, when later on the cSS examples mentions the "colors" key in brackets: which one is meant?

I have this put together and it does not work:

    extend: {
      colors: {
        'pink': {
          300: '#4F031C',
          400: '#630D29',
        }
      },
      gradientDarkColors: {
        'pink300': '#4F031C',
        'pink400': '#630D29'
      },
    },
    linearGradients: theme => ({
      colors: theme('gradientDarkColors'),
    }),

// Usage in html:
class="bg-gradient-b-colors"

What works is this:

// Usage in html:
class="bg-gradient-b-pink300"

But that does not allow to use a second pre-defined color, instead the first color is taken from - I have no idea where... (I think it is ransparent)

[hacknug]

You need to use and array of colors as shown in the README.md:

linearGradients: {
  directions: { // defaults to these values
    't': 'to top',
    'r': 'to right',
    'b': 'to bottom',
    'l': 'to left',
  },
  colors: { // defaults to {}
    'red': '#f00',
    'red-blue': ['#f00', '#00f'],
    'red-green-blue': ['#f00', '#0f0', '#00f'],
    'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
  },
},

/* configurable with the "linearGradients" theme object */
.bg-gradient-[direction-key]-[color-key] {
  background-image: linear-gradient([direction-value], [color-value-1], [color-value-2], [...]);
}

What the things in brackets refer to are the directions and colors object keys. In this case [direction-key] would be one of ['t', 'r', 'b', 'l'] and [color-key] one of ['red', 'red-blue', 'red-green-blue', 'black-white-with-stops'].

You need to use it like you mentioned: bg-gradient-b-pink300

[rowild]

I got it after a lot of trying. But to be honest: the documentation could do better - no offense!

1: when starting reading the docu and just wanting to try out the linear gradient, there is no mentioning of the need of array notation.
2: what happens, when there is no array, but only one color? The docu says nothing.
3: The usage in an HTML example should be present.
4: using "colors" twice for two different keys is nothing else but confusing in the beginning.

If you agree, I'd be happy to provide a PR.

Thanks for getting back to me!

[benface]

@rowild Definitely agree with you there. I want to improve the documentation of all my plugins in the near future, and this one is one of the hardest ones because there are so many options and different ways to do things.

what happens, when there is no array, but only one color? The docu says nothing.

Like you guessed in your first post, it creates a gradient from transparent to that color (or, in the case of radial or conic gradients, from that color to transparent).

using "colors" twice for two different keys is nothing else but confusing in the beginning.

The first colors key is Tailwind's colors which I assumed most people would already customize, so the "Simple" example is supposed to show the minimal amount of configuration necessary to create gradients from your existing theme colors. But we should definitely say that in words rather than just spouting code samples haha.

If you agree, I'd be happy to provide a PR.

That would be very generous of you! Thank you for offering it.

[rowild]

Great! Thank you! I'll provide a PR soon. Let me just finish a project...

[corybagozzi]

Thanks to the original creator and everyone on this thread. I am trying to get this to work as well and it is a bit outside of my skillset because I can't get it to do what it is supposed to. Patiently waiting for some updated docs to follow along :)

[rowild]

Sorry that I didn't provide anything yet. Maybe I can help you now and here. How about you post your code and I have a look at it?