Tailwind 自动完成功能无法在多行（WebStorm）中工作

Question

在 JSX/React 中使用

className

的多行字符串时，我在 WebStorm 中遇到 Tailwind CSS 自动完成问题。当字符串位于单行时，自动完成工作正常，但是当我将字符串分成多行时，如下所示：

className={
  "bg-blue-500" + 
  " text-white"
}

Tailwind 的自动完成功能在第一行和第二行停止工作。这会造成很多不便，特别是在管理较大组件中的长类列表时。

我知道 WebStorm 在分割长字符串时会自动添加

+

，但即使有这种行为，我希望自动完成功能能够在连接的字符串上工作。 （分割后，如果我按

ctrl + space

它将显示自动完成，但不会自动完成且无需按

ctrl + space

）

我还尝试使用模板文字来避免

+

符号，但是，WebStorm 会自动将行连接成一个连续的长字符串（我不知道为什么）。

有没有办法让 Tailwind CSS 类自动完成以在 WebStorm 中的多行字符串中运行？

这是我的设置：

• WebStorm版本：WebStorm 2024.1.5
• Prettier 用于格式化
• WebStorm 的 Tailwind CSS 插件已安装，我知道它适用于单行字符串
• 语言：JavaScript/React (JSX)

任何建议或解决方案将不胜感激。

Answer 1

我找到了 Tailwind CSS 自动完成功能在多行（WebStorm）中不起作用的问题的解决方案。

问题与 Prettier Tailwind CSS 插件 (

prettier-plugin-tailwindcss

) 有关。该插件会自动删除类之间不必要的空格以确保格式一致，从而导致多行字符串被连接到单行中。

为了解决此问题，我将以下行添加到我的 Prettier 配置 (.prettierrc) 中：

"tailwindPreserveWhitespace": true

但是，如果您在大括号内使用双引号，即使使用此设置，自动完成功能也无法跨多行字符串工作。 在这种情况下，最好坚持使用不带花括号的双引号。