nested list marker: specificity is not followed properly

[djlguzman]

What version of Tailwind CSS are you using?

v4.1.6

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

Tailwind Playground

What version of Node.js are you using?

Tailwind Playground

What browser are you using?

Google Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/zfRYhU376t

Describe your issue

2nd li tag is using its parent li marker class instead of its own marker class name. I believe with how specificity works it should be using its own marker:text-base rather than parent's marker:text-lg class?

[wongjn]

The marker: variant has two rules:

.marker\:class-name *::marker {
  …
}
.marker\:class-name::marker {
  …
}

So the *::marker wins out for marker:text-lg because the CSS rule appears after marker:text-base in the generated CSS.

You can workaround this by using the important flag: https://play.tailwindcss.com/fdfHT4oA99

[djlguzman]

@wongjn thanks for suggesting a workaround, appreciate it! Since it's just a workaround, does it mean this is a known issue or something?

[wongjn]

Workaround meaning it works around the issue you are experiencing. I don't believe the variant itself can be changed in core to accomodate your problem, since it could break for other usage scenarios.

Having said that, another solution would be to override the marker: variant in your project to fit your needs: https://play.tailwindcss.com/MNax7gWZ7e