Replies: 1 comment
-
I don't know if you ever figured this one out, but I'm currently working through a very similar problem that led me here and I can shed a little light on this interaction for you. In this line of your reproduction code, note that you've got your Tailwind classes in a string that's in a JavaScript context. Because Tailwind's method of escaping underscores in arbitrary values (using a single slash) is the same as JavaScript's, a conflict occurs. You've properly double-escaped the slash to make sure it ends up in the generated HTML, but Tailwind sees and includes both of your slashes in the generated class. I've documented this phenomenon a little more thoroughly in this gist if it helps. While it doesn't give the result we want, it does ultimately make sense that this happens given Tailwind's purposefully simple approach to class detection. I plan to raise an issue about it, but I'm struggling a bit with what to suggest as an alternative to the Edit: Also, a note on the "randomness" you're seeing. When troubleshooting this problem for myself, I experienced a bit of this due to the fact that Tailwind injects new classes into the document as you develop without purging old ones. In this specific situation—where the problem is ultimately that you can't get the HTML class and the Tailwind selector to both be correct at the same time, only one or the other—you can end up with "false positives" where an old Tailwind selector will match your current HTML. You end up thinking you solved the problem (even though you tried that before, weird), move on, and then when your styles get purged by something later on (like restarting your environment) it's broken again. |
Beta Was this translation helpful? Give feedback.
-
I'm trying to perform some custom
<button>
styling using::before
. Specifically, I'm trying to put an icon in the::before
pseudo-element. I'm using google's icon font as such:Things seem to work fine when using single-word icons such as
light
orhome
, but not when using multi-word icons such asdark_mode
orlight_mode
. In the below video I switch between these two icons. One loads, the other does not.Screencast.2022-05-16.06.34.34.mp4
Whether an icon will load or not seems pretty much random. It might fail to load initially and then load fine 30 minutes later. Then, after another 30 minutes it fails to load again. I've been trying to figure this out for hours - with a reboot in between - and have not been able to determine a pattern.
The class lists in chrome seems to be fine IMO. However, when an icon fails to load, the entire
::before
pseudo-element fails to render:(I have tried a varying amount of backslashes before the underscore and have not found the number of slashes to affect whether the
::before
pseudo-element will render or not).I have set up a minimal repo in which I can reproduce the issue: https://github.com/FelixZY/tailwind-button-before-content-issue
My system information
Ubuntu 20.04.4 LTS (focal) (64-bit)
Version 101.0.4951.54 (Official Build) (64-bit)
18.0.0
8.6.0
Beta Was this translation helpful? Give feedback.
All reactions