Support defining variants as functions for easier extending

[adamwathan]

This PR adds support for configuring variants as functions to make it easier to add variants without respecifying the entire list.

Variant functions are invoked with an object that can be destructured into three helper functions:

• variants, which can be called like variants('padding') to get the list of variants for that key
• before, which can be called like before(['hover']) to add some variants before the existing variants, before(['hover'], 'focus') to add some variants before a specific existing variant, or before(['hover'], 'focus', ['responsive', 'focus']) to add variants before a specific variant to an explicit list, instead of automatically adding it to the list matching the current key
• after, which can be called like after(['hover']) to add some variants after the existing variants, after(['hover'], 'focus') to add some variants after a specific existing variant, or after(['hover'], 'focus', ['responsive', 'focus']) to add variants after a specific variant to an explicit list, instead of automatically adding it to the list matching the current key
• without, which can be called like without(['hover']) to disable a variant that's enabled by default, or without(['hover'], ['responsive', 'hover', 'focus]) to remove that variant from a list that is passed in rather than assuming the current context

In practice it looks like this:

// tailwind.config.js
module.exports = {
  variants: {
    opacity: ({ before }) => before(['group-hover'], 'hover')
  }
}

Using the last parameter of each helper lets you compose these together, to do stuff like:

// tailwind.config.js
module.exports = {
  variants: {
    opacity: ({ before, after, without }) => without(['responsive'], before(['group-hover'], 'hover', after(['group-focus', 'focus')))
  }
}

[liorocks]

Excellent PR!

Also, alternative solution:

const { variants } = require('tailwindcss/defaultConfig');
// ...
variants: {
   textColor: [...variants.textColor, 'group-hover']
},

[adamwathan]

@landish Totally, and that's what we've recommended until now! The main downsides of that approach are that you can't easily get the default variants for stuff that comes from third party plugins, and that you can't easily insert a variant at a specific spot in the list 👍🏻

[frederikhors]

@adamwathan can you please explaint it better please?

I'm trying to use

//backgroundColor default is: ['responsive', 'hover', 'focus']
backgroundColor: ({ before }) => before(['responsive', 'hover', 'focus'], 'odd') //doesn't work
backgroundColor: ({ before }) => before('hover', 'odd') //doesn't work
// I just need this: backgroundColor: ['responsive', 'odd', 'hover', 'focus'],

What to do?

I can't just understand this:

or before(['hover'], 'focus', ['responsive', 'focus']) to add variants before a specific variant to an explicit list, instead of automatically adding it to the list matching the current key

Thank you.

[adamwathan]

@frederikhors Try this:

backgroundColor: ({ before }) => before(['odd'], 'hover')

The signature of before is (variantsYouWantToAdd, variantYouWantToAddThemBefore). So you want to add odd, so ['odd'] should be the first arg (it's an array in case you needed to add multiple). You want to add it before the hover variant, so hover is the second arg 👍