Escaping \n in image URL
#20364
|
This is a preflight check for a potential bug, it's a polite request for additional eyes. I'm using https://placehold.co for placeholder images with overlaid text. My placeholders are vectors with height + width dimensions. For this ticket, here's a working URL for a placeholder with three lines of text: https://placehold.co/640x272/60A5FA/3B82F6.svg?text=640x272@1\n1280x544@2\n1920x816@3&font=oswald This works just fine in a browser URL outside of Tailwind CSS. It does not work in the context of a Tailwind This doesn't work (https://play.tailwindcss.com/4raiPOBMc3): This does work (https://play.tailwindcss.com/4zETyirg9d): Assuming PEBKAC in the first instance, is this actually the expected behaviour? Thank you. |
Replies: 1 comment 1 reply
|
Hi, @petecooper This is expected behavior, not a bug. Tailwind's arbitrary-value parser treats \ as its own escape character when processing [...] syntax (the same mechanism used for _ to preserve literal underscores). A single \n gets its backslash consumed by Tailwind's parser before the value is emitted into the generated CSS, so the browser never sees a literal \n — hence the run-on text. Escaping it as \n gives Tailwind's parser one backslash to consume while still emitting a literal \n in the compiled CSS, which is why your second example works. This lines up with Tailwind's own docs recommending String.raw() in JSX for the same reason — backslashes inside arbitrary values are special and often need doubling depending on the templating/parsing layer. |
|
Perfect – thank you very much @Aaditya1273. |
Hi, @petecooper
This is expected behavior, not a bug. Tailwind's arbitrary-value parser treats \ as its own escape character when processing [...] syntax (the same mechanism used for _ to preserve literal underscores). A single \n gets its backslash consumed by Tailwind's parser before the value is emitted into the generated CSS, so the browser never sees a literal \n — hence the run-on text. Escaping it as \n gives Tailwind's parser one backslash to consume while still emitting a literal \n in the compiled CSS, which is why your second example works. This lines up with Tailwind's own docs recommending String.raw() in JSX for the same reason — backslashes inside arbitrary values are speci…