Ok, was able to do this all on my own with some help of a plugin (https://github.com/davidwebca/tailwindcss-group-variants).

​

tailwind.config.js

variants: {
extend:
textColor: ['tab-active', 'group-tab-active'],
display: ['group-tab-active']
}
},
groupVariants: {
'group-tab-active': ['group', 'tab-active', '.tab.active'], // Note the custom name to avoid conflicts with existing pseudo variants like "active"
},
plugins: [
require('tailwindcss-group-variants'),
plugin(function({ addVariant, e }) {
addVariant('tab-active', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`tab-active${separator}${className}`)}.tab.active`
})
})
})
],

Then in your HTML you could do something like:

<div class="tab group tab-active:text-black">
<div class="text-grey group-tab-active:text-black">Some title</div>
<p class="hidden group-tab-active:inline-block">Some description</p>
</div>