Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support defining variants as functions for easier extending #2309

Merged
merged 5 commits into from
Sep 4, 2020

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Sep 4, 2020

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
Copy link

liorocks commented Sep 4, 2020

Excellent PR!

Also, alternative solution:

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

@adamwathan
Copy link
Member Author

@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 👍🏻

@adamwathan adamwathan merged commit 476950c into master Sep 4, 2020
@adamwathan adamwathan deleted the variant-functions branch September 4, 2020 14:59
@frederikhors
Copy link
Contributor

frederikhors commented Sep 5, 2020

@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
Copy link
Member Author

@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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants