🐛 [BUG]: Tailwind @apply dark:<xxx> doesn't work after updating

[remiconnesson]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

I'm using a bunch of tailwind @apply to stylize the graph in various scenario

for example:

:deep(.vue-flow__node){
  @apply cursor-pointer font-mono bg-slate-100 dark:text-slate-100 dark:bg-slate-700
}

and it was working fine with the following deps

    "@vue-flow/controls": "^1.0.0",
    "@vue-flow/core": "^1.11.1",
    "@vue-flow/minimap": "^1.0.1",

but now with versions

      "@vue-flow/controls": "^1.0.5",
      "@vue-flow/core": "^1.19.0",
      "@vue-flow/minimap": "^1.1.1",

the dark styles don't apply.

I tried several version of tailwind with both vue-flow v1.11 and vue-flow and the problem is not occuring with vue-flow 1.11 but is with the latest version

I have no idea what could be causing this

The styles applied without the dark modifier does work so tailwind is able to reach, it is just the dark version that are not working.

Expected Behavior

dark styles applied with @apply are working again

Steps To Reproduce

(I'm going to try to build a minimal repro later on)

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

Can you create a sandbox reproduction for this? Off the cuff I can't tell you what's going wrong 😄
Here's a template.

[remiconnesson]

sorry I just created a repro but without the template

[bcakmakoglu]

No worries, any reproduction would be helpful, the template is just to make it easier to get started ^^

[remiconnesson]

here is the repro https://github.com/remiconnesson/minimal-repro-vueflow-tw-apply

[remiconnesson]

the nodes should turn red in dark mode

but they don't

[bcakmakoglu]

Doesn't work for me in 1.11.1 either, but it does work if you remove the scoped modifier from your style tag and just use simple css

.vue-flow__node {
  @apply cursor-pointer bg-green-100 dark:text-red-100 dark:bg-red-700;
}

[bcakmakoglu]

Tbf this doesn't look like a Vue Flow issue but somewhat of an issue with dark mode styles not being properly applied to elements selected with :deep - nothing I can do about it honestly.

For example this isn't working either.

<template>
	<div class="barbaz">
		<Foobar />
	</div>
</template>

<style scoped>
.barbaz :deep(.foobar) {
  @apply text-xl text-red-500 dark:text-white;
}

// Foobar.vue
<template>
	<div class="foobar">Foo</div>
</template>

But this works completely fine

.barbaz .foobar {
  @apply text-xl text-red-500 dark:text-white;
}

So the issue here doesn't seem like it's related to Vue Flow at all.

[remiconnesson]

Oh thank you very much

I will update my code without scoping in the meantime and I will try to isolate which deps is causing this and open an issue in the correct repo

Sorry for the mistake

[remiconnesson]

FYI the issue seems to come from tailwindcss@3.3 ,

After experimenting with different versions of the deps, I tried to put tailwind@3.2 against tailwind@3.3 and 3.2 works fine with :deep(...) { @apply dark:<xxx> but 3.3 doesn't

as you shown vueflow is not an issue here

demo bug with vueflow: https://github.com/remiconnesson/minimal-repro-vueflow-tw-apply
demo bug without vueflow : https://github.com/remiconnesson/tailwind-vue-deep-apply-dark-bug

[bcakmakoglu]

Good to know and thanks for informing me 😄
I usually use UnoCSS instead of Tailwind so I haven't noticed this problem previously but it might be good to open an issue with them to make them aware of this problem

[remiconnesson]

Good to know and thanks for informing me 😄 I usually use UnoCSS instead of Tailwind so I haven't noticed this problem previously but it might be good to open an issue with them to make them aware of this problem

:) yes you're right, I'm opening an issue here with tailwindcss tailwindlabs/tailwindcss#11024