[WIP] Background gradients

[swanson]

Previous discussion: tailwindlabs/discuss#73

Proposed syntax: bg-gradient-[x|y]-$color1-to-$color2

I wanted to spike out this feature and quickly realized that making gradients of every color combination was going to generate a lot of CSS (several thousand new rules; realistically <10 would ever be used in a given project). The tests were taking forever to run (presumably due to the much larger fixtures) so it seemed like a good place to stop and reflect on the approach.

A few options I considered:

• Generate combinations of the "primary" colors (red-to-blue, not red-to-red-darker)
• Generate gradients within the same primary color (red-to-red-dark, red-to-red-light, etc but not red-to-blue, red-to-green)
• Generate gradients for adjacent colors on the wheel (yellow-to-orange, yellow-to-green, etc but not pink-to-green or blue-to-orange)
• Maybe some special cases that also blend every color to white, black, transparent

Any thoughts? Maybe there is some other configuration approach that could be taken.

(Test and docs are obviously missing)

[adamwathan]

Hey @swanson thanks for getting this started!

I think the most sane way to handle this is to not do anything magically or automatically and instead just add a new backgroundGradients section to the config file, where you can name your gradients whatever you want and design them however you want.

As a simple first version, I think just doing something like this would be fine:

{
 // ...
  backgroundGradients: {
    'blue-purple': `linear-gradient(to right, ${colors['blue']}, ${colors['purple']})`,
    // etc.
  }
}

If we want to support a more convenient syntax later, like:

{
 // ...
  backgroundGradients: {
    'blue-purple': {
      direction: 'horizontal',
      start: colors['blue'],
      end: colors['purple'],
    },
    // etc.
  }
}

...we could easily layer that on without it being a breaking change.

[wpcarro]

Any updates on implementing @adamwathan's idea? I wouldn't mind taking a crack at it this week so long as I'm not duplicating any work!

[swanson]

@wpcarro please do -- I haven't done any additional work and don't foresee having time in the short term.

[adamwathan]

We're releasing our new plugin system (#397) this week which will make it really easy to generate stuff like this from user-land, so I'm going to close this for now since things have been pretty quiet here. Still totally open to exploring adding background gradients to core, but probably best to iterate on it as a plugin first 👍

[wpcarro]

Sounds good, thanks for the response, @adamwathan. Looking forward to the plugin ecosystem! I will probably take a crack at the gradients as soon as next week presuming time permits.