Unpredictable sort order of custom themes, unable to override default prose theme with custom theme
Closed this issue · 2 comments
What version of @tailwindcss/typography are you using?
0.5.16
What version of Node.js are you using?
18.20.7
What browser are you using?
Chrome
What operating system are you using?
macOS 15.5
Reproduction repository
https://github.com/j2em6h/prose-sort-order
Describe your issue
I am trying to upgrade a project to tailwind v4, it uses several custom themes via tailwind.config.js that are meant to stack on top of the default .prose theme. However (some of) my custom themes (.prose-legal in the reproduction example) are being added very early in the stylesheet, with the default .prose appear quite late, resulting in those default .prose values overriding my custom themes, rather than the other way around.
There doesn't appear to be any way to control where in the compiled stylesheet my themes appear, it's not alphabetical by classname, and it's not based on the order I've added them to the config file.
I found mention of number of properties being a factor in #16715
Most amount of properties should be first such that we can override it with more specific utilities that have fewer properties.
However, the custom theme I'm seeing at the top of the stylesheet has less properties than the default .prose. Additionally, removing a significant number of items from the custom theme also does not change where it appears in the stylesheet.
The layer workaround as described here worked to resolve this issue for me.
Following up here because I've been running into this myself. This seems like something that should be the default? Especially since all the prose classes are prepended with prose-* anyway? I havent dug into the changes from v3 to v4 a lot recently, but I'm struggling to see where anyone would want the typography plugin to override utilities used in the markup.