I'm having an issue with Tailwind CSS autocomplete in WebStorm when using multi-line strings for className in JSX/React. The autocomplete works fine when the string is on a single line, but when I break the string across multiple lines like this:
className={
"bg-blue-500" +
" text-white"
}
Tailwind's autocomplete stops working on the first and the second line . This is causing a lot of inconvenience, especially when managing long class lists in larger components.
I am aware that WebStorm automatically adds + when splitting long strings, but even with that behavior, I expect the autocomplete to work across the concatenated string. (after the splitting, if I press ctrl + space it will show the autocomplete, but not automatically and without pressing ctrl + space )
I also tried using template literals to avoid the + sign, however, WebStorm automatically joins the lines into one continuous long string (I don't know why).
Is there any way to get autocomplete for Tailwind CSS classes to function in multi-line strings in WebStorm?
Here's my setup:
Any advice or solution would be greatly appreciated.
I found the solution to my issue with Tailwind CSS autocomplete not working in multi-line (WebStorm).
The problem was related to the Prettier Tailwind CSS plugin, which I installed. (prettier-plugin-tailwindcss). This plugin automatically removes unnecessary whitespace between classes to ensure consistent formatting, which caused the multi-line strings to be joined into a single line.
To resolve this, I added the following line to my Prettier configuration (.prettierrc):"tailwindPreserveWhitespace": true
However, if you're using double quotes inside curly braces, the autocomplete won’t work across multi-line strings, even with this setting. In that case, it's better to stick with double quotes without curly braces.