When upgrading from 3.4.0 -> 3.4.1 data-[] is now less specific than dark: breaking change

[ieedan]

What version of Tailwind CSS are you using?

3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

vite 5.0.11
svelte 4.2.7
sveltekit 2.3.2

What version of Node.js are you using?

18.16.0

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction URL

In this case I would have to link to my actual project. When I try to recreate it with a smaller project I can't, maybe to do with the amount of classes in the project.

I totally understand if the issue is closed but I thought I'd try anyways.

If you fork https://github.com/ieedan/geist-ui-svelte

npm install # loads the 3.4.0 version
npm run dev

Then navigate to: http://localhost:5173/components/text

Under colors it should look like this

Now if you run

npm install [email protected]
npm run dev

Some of colors applied from the text component by data-[] are not applied.

Here is what that component looks like. There are other components breaking in the same way that have just as many or more classes.

<script lang="ts">
	import type { TextAlignment } from "$lib/types.js";

	export let type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "span" = "p";

	export let i = false;
	export let b = false;
	export let del = false;
	export let blockquote = false;
	export let align: TextAlignment = "initial";
	export let style: string = "";
	let className = "";
	export { className as class };

	export let color: "default" | "secondary" | "success" | "warning" | "error" | "abort" =
		"default";
</script>

<svelte:element
	this={type}
	style="text-align: {align};{style}"
	data-i={i}
	data-b={b}
	data-del={del}
	data-blockquote={blockquote}
	data-style={color}
	class="text-gray-999 dark:text-gray-0 geist-ui-text data-[i=true]:italic data-[b=true]:font-bold data-[blockquote=true]:flex justify-between place-items-center
    data-[del=true]:line-through data-[style='secondary']:text-gray-500 data-[style='success']:text-blue-600
    data-[style='warning']:text-orange-300 data-[style='warning']:dark:text-orange-400 data-[style='error']:text-red-500
    data-[style='error']:dark:text-red-600 data-[style='abort']:text-gray-300 data-[style='abort']:dark:text-gray-700
    data-[blockquote=true]:bg-gray-50 data-[blockquote=true]:border-gray-100 data-[blockquote=true]:dark:bg-gray-950
    data-[blockquote=true]:dark:border-gray-900 data-[blockquote=true]:border data-[blockquote=true]:px-2 data-[blockquote=true]:py-1
    data-[blockquote=true]:rounded-md p-0 m-0 {className}"
>
	<slot />
</svelte:element>

<style lang="postcss">
	small,
	p,
	span.geist-ui-text {
		@apply inline;
	}

	small.geist-ui-text {
		@apply text-xs font-normal;
	}

	p,
	span.geist-ui-text {
		@apply text-base font-normal;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6.geist-ui-text {
		@apply font-bold;
	}

	h1.geist-ui-text {
		@apply text-7xl;
	}

	h2.geist-ui-text {
		@apply text-5xl;
	}

	h3.geist-ui-text {
		@apply text-3xl;
	}

	h4.geist-ui-text {
		@apply text-2xl;
	}

	h4.geist-ui-text {
		@apply text-xl;
	}

	h5.geist-ui-text {
		@apply text-lg;
	}
</style>

Describe your issue

Upgrading from version 3.4.0 -> 3.4.1 gives me issues with data-[] applying styles. Some still apply but many do not.

[ieedan]

Okay I see what happened. So data-[] tags are no longer more specific than the dark: selector meaning when you do this like I have

<p data-type={type} class=" data-[type='blue']:text-blue-600 text-black dark:text-white">
This should always be blue when type is blue
</p>

It is white in dark mode but blue in light mode. This is a huge breaking change. Maybe instead of a 0.0.x release it should've been marked as a breaking change.

It seems like this is intended behavior looking at the original PR and as mentioned it breaks a large amount of existing code.

[wongjn]

As you say, the change of specificity of dark: in 3.4.0 was a breaking change in itself as per #12633, which was reverted in #12717. As per the aforementioned PR, If you want to keep the v3.4.0 behavior of darkMode: 'class', use darkMode: "selector".

[ieedan]

I don't understand how this isn't a bigger bump in version. It completely changes the way dark: works so when you innocently upgrade to 3.4.1 it breaks everything.

There's also mention of this in the docs and the new darkMode selector isn't in the extension autocomplete either.

[wongjn]

It's was breaking change from 3.0.0-3.3.7 → 3.4.0. So from this perspective, it's a patch version to fix the bug as 3.4.1. On the other hand, from 3.4.0 as a starting point perspective, indeed, it is a breaking change from 3.4.0 → 3.4.1. If semver was strictly followed, it could be argued to be:

Real timeline: 3.0.0-3.3.7 → 3.4.0 → 3.4.1
Strict semver: 3.0.0-3.3.7 → 4.0.0 → 5.0.0 (or perhaps not needed at all since we
                                           wouldn't need to revert the breaking change)

[ieedan]

I guess 3.4.0 has been out longer than I thought. Thanks for clearing this up.

Is there a recommended way to use 'dark:' now?

For examples like the one I showed should we be duplicating the text-blue-600 as dark:text-blue-600 or something else?

[wongjn]

If you want to keep the v3.4.0 behavior of darkMode: 'class' you could use darkMode: "selector". Otherwise, you could use the important modifier to guarantee stronger specificity:

<p data-type={type} class=" data-[type='blue']:!text-blue-600 text-black dark:text-white">
  This should always be blue when type is blue
</p>

[thecrypticace]

The suggestion @wongjn gave is exactly what I'd do here. You happened to install Tailwind in the period before we'd fixed the breaking change (sorry about that!).

Personally, I'd use darkMode: "selector" as that sets things up in the preferred / more correct way (such that darkMode: "selector" and darkMode: "media" work the same with regards to specificity and behavior) but both options are valid. As for the note about the docs — it's on our list to get them updated with the new options soon-ish.

Hope that helps and let us know if you've got other questions!