transition with @apply

[said3ourhou]

transition stops working when I put it in my scoped scss with @apply.

.popup-menu__options {
@apply bg-mid-grey tw-transition-height tw-duration-300 tw-absolute tw-bottom-30 tw-h-0 tw-z-30 tw-overflow-hidden tw-w-full ;
}

When I put "transition" back into html everything works as it should.

class="popup-menu__options bg-mid-grey tw-transition-height tw-duration-300 tw-absolute tw-bottom-30 tw-h-0 tw-z-30 tw-overflow-hidden tw-w-full"

Any idea why it doesn't work with @apply ?

Thanks in advance.

[simonswiss]

Could you please create a quick Tailwind Play example with your setup?

I tried to make the Play, but there are many custom classes you created in the code above, so probably best to look at an example coming from you 👍

Here's an example (totally different) where a transition class is used in @apply, and it works fine:

https://play.tailwindcss.com/95mCZBzqQH?file=css

[said3ourhou]

@simonswiss Thank you very much for your comment.
Not just the transition but all the Pseudo-Class Variants doesn't work for me in @apply.
This is another example of my code :

.user-dropdown {
@apply tw-hidden tw-absolute tw-right-15 tw-left-auto tw-top-67 tw-z-1001 tw-min-w-200 tw-bg-black tw-rounded-b-lg tw-m-0 tw-p-0 tw-text-md tw-border-solid tw-border-1 tw-border-gray-mineshaft group-hover:tw-block group-focus:tw-block ;
}

I use tw- as a prefex :

module.exports = {
prefix: 'tw-',
}

My variant config :

variants: {
textDecoration: ['hover', 'focus'],
padding: ['responsive', 'hover', 'focus'],
spacing: ['responsive', 'hover', 'focus'],
zIndex: ['responsive', 'hover', 'group-hover'],
height: ['responsive', 'hover', 'group-hover'],
bottom: ['responsive', 'hover', 'group-hover'],
inset: ['responsive', 'hover', 'focus', 'group-hover'],
transitionProperty: ['responsive', 'hover', 'focus'],
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
borderStyle: ['responsive', 'hover', 'focus', 'last', 'first', 'odd'],
borderWidth: ['responsive', 'hover', 'focus', 'last', 'first', 'odd'],
borderColor: ['responsive', 'hover', 'focus', 'last', 'first', 'odd'],
display: ['responsive', 'hover', 'focus', 'group-hover', 'group-focus'],
textDecoration: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
wordBreak: ['responsive', 'hover', 'focus'],
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
margin: ['responsive', 'hover', 'focus', 'last'],
animation: ['responsive', 'motion-safe', 'motion-reduce']

},

Everything works good for me except the Pseudo-Class Variants in @apply !!!

Thank you

[adamwathan]

Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.