A query on Tailwind theme functions, is this possible by defining mixin in JS ?

[rhysmatthew]

Hi, I understand this may not be possible but I thought I'd reach out for any insights.

I'm trying to define a mixin that uses Tailwind theme functions like so to save me repeating lines:

@define-mixin btnBg $colour $hoverColour { background: linear-gradient(to right, $colour, $colour), linear-gradient(to right, $hoverColour, $hoverColour, $hoverColour); }

@mixin btnBg theme('colors.offblack') theme('colors.purple.DEFAULT');

However my output doesn't process the tailwind theme function within the mixin, I just get background: linear-gradient(to right,$colour,$colour),linear-gradient(to right,$hoverColour,$hoverColour,$hoverColour);. I've tried just passing a string also with the theme function within the 'define-mixin' but no luck there either.

Is there a way to write this in JS at all or ensure that the tailwind theme function runs before the mixin plugin? I understand I need to figure this out myself but any pointers would be appreciated. Equally if it's not possible then please just close the issue.

Thanks,

[ai]

Can you disable all plugins, enable only postcss-mixins and show me the output of:

@define-mixin btnBg $colour $hoverColour {
  background: linear-gradient(to right, $colour, $colour),
    linear-gradient(to right, $hoverColour, $hoverColour, $hoverColour);
}

a {
  @mixin btnBg theme('colors.offblack') theme('colors.purple.DEFAULT');
}

[rhysmatthew]

Thanks for the quick response!

I've set my postcss.config.js to this:

module.exports = { plugins: { 'postcss-mixins': {} }, };

and the output of the above (with no other CSS loaded in) is:

a { background: linear-gradient(to right, $colour, $colour), linear-gradient(to right, $hoverColour, $hoverColour, $hoverColour); }

If I change my config to include tailwindcss before postcss-mixins, I get can get these variables but just not with the mixin plugin.

module.exports = { plugins: { 'tailwindcss': {}, 'postcss-mixins': {} }, };

a { @mixin btnBg theme('colors.offblack') theme('colors.purple.DEFAULT'); color: theme('colors.purple.DEFAULT'); }

Output:

a { background: linear-gradient(to right, $colour, $colour), linear-gradient(to right, $hoverColour, $hoverColour, $hoverColour); color: #C099F8; }

[ai]

You have a typo (, between params):

- @define-mixin btnBg $colour $hoverColour {
+ @define-mixin btnBg $colour, $hoverColour {

[rhysmatthew]

@ai - Ah apologies my mistake! Works perfect, thanks for your help.