GoLand 2025.2 Help

Tailwind CSS

GoLand 与 Tailwind CSS 集成，提供 Tailwind CSS 语法支持 、Tailwind CSS 类名补全、CSS 函数与指令支持、悬停时预览生成的 CSS，以及专为 Tailwind CSS 提供的检查功能。

GoLand 中对 Tailwind CSS 的支持由 Tailwind CSS 语言服务器 提供支持，该服务器会检测 Tailwind CSS 包，并根据其版本查找特定于 Tailwind CSS 的项目配置：

  • 在 Tailwind CSS 4 中，语言服务器会查找包含 @import "tailwindcss" 指令的 CSS 文件。

  • 在 Tailwind CSS 3 中，语言服务器会查找 tailwind.config.js 文件。

GoLand 随附捆绑的 Tailwind CSS 语言服务器。 不过，建议始终保持语言服务器为最新版本，请下载最新的服务器版本并在 设置 | 语言与框架 | 样式表 | Tailwind CSS 页面中指定其路径，具体操作请参阅 配置 Tailwind CSS 语言服务器。

开始之前

  1. 请确保您的计算机上已安装 Node.js。 请按照 配置本地 Node.js 解释器、 在 Windows 子系统中使用 Node.js 或 配置远程 Node.js 解释器 中的说明在项目中配置 Node.js 解释器。

  2. 请确保在 已安装 页面的 设置 | 插件 选项卡中已启用 CSS 和 Tailwind CSS 捆绑插件，具体操作请参阅 管理插件。

  3. 请确保 tailwindcss 包已列在 package.json 的依赖中，并且项目已正确配置，即在 CSS 文件中包含 @import "tailwindcss" 指令（TailwindCSS 4）或在 tailwind.config.js 文件中（TailwindCSS 3）。

    或者， 按照以下说明 安装并配置 Tailwind CSS。

安装并配置 Tailwind CSS

请参阅 Tailwind CSS 官方网站 获取详细说明。

  1. 打开嵌入式 终端 （Alt+F12 ），然后键入：

    npm install -D tailwindcss

  2. 打开要使用 Tailwind CSS 的 CSS 文件，并添加以下 import 语句：

    @import "tailwindcss";

  3. 重启 Tailwind CSS 语言服务器。 为此，请单击状态栏中的 语言服务 部件（图标可能为 语言服务部件 或 语言服务部件 ），然后单击 重启服务图标 旁边的 Tailwind CSS。

    重启 Tailwind CSS 服务器

  4. 打开 HTML 文件，在 <head></head> 标签下添加指向 CSS 文件的链接，例如 <link href="/src/styles.css" rel="stylesheet">

配置 Tailwind CSS 语言服务器

GoLand 中对 Tailwind CSS 的支持由 Tailwind&#xa0;CSS 语言服务器 提供支持，该服务器会检测 Tailwind CSS 包，并根据其版本查找特定于 Tailwind CSS 的项目配置：

  • 在 Tailwind&#xa0;CSS&#xa0;4 中，语言服务器会查找包含 @import "tailwindcss" 指令的 CSS 文件。

  • 在 Tailwind&#xa0;CSS&#xa0;3 中，语言服务器会查找 tailwind.config.js 文件。

GoLand 随附捆绑的 Tailwind&#xa0;CSS 语言服务器。 但建议始终保持语言服务器为最新状态。

您也可以自定义默认的 Tailwind CSS 配置选项。

  1. 全局安装最新版的 @tailwindcss/language-server 包。 为此，请打开嵌入式 终端 （Alt+F12 ），然后键入：

    npm install -g @tailwindcss/language-server

  2. 打开 设置 对话框（Ctrl+Alt+S ），转到 设置 | 语言与框架 | 样式表 | Tailwind&#xa0;CSS。

  3. 在 语言服务器 字段中，指定 @tailwindcss/language -server 包的路径。

  4. 您还可以自定义默认的 Tailwind CSS 配置选项。 例如，您可以调整 HTML 属性 列表以提供类补全，或者使用实验性的 正则表达式格式 指定其他触发补全的区域。

    在 配置 区域更新属性，以添加配置选项。

补全 Tailwind CSS 类

Tailwind CSS Language Server 在多种上下文中为 Tailwind CSS 类提供代码补全，例如，在 HTML 中以及经过 @apply 指令处理后的 CSS 文件中、JavaScript 字符串字面量中等。 在补全列表中，来自 Language Server 的建议将使用 Tailwind CSS 图标 标识，而 类图标 表示来自项目中已使用类的建议。

补全列表 — 来自服务器和项目的建议

预览生成的 CSS

当您将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind CSS 类上时，GoLand 会显示一个包含结果 CSS 预览的 文档 弹窗。 要在工具窗口中查看预览，请单击 更多图标 ，然后选择 在文档工具窗口中显示。

CSS 预览

在补全代码时，预览也会显示在 文档 弹窗（Ctrl+Q ）中。

在补全代码时预览生成的 CSS

在 .slim、.haml 及其他文件中支持 Tailwind CSS

GoLand 可在其他文件类型中为 Tailwind CSS 类提供补全，例如 .slim 、 .haml 、 .jte 、 .kte 等。

  1. 按 Ctrl+Alt+S 打开设置，然后选择 语言与框架 | 样式表 | Tailwind CSS。

  2. 在 includeLanguages 属性中添加您希望获取 Tailwind CSS 类补全的上下文。 请使用以下格式：

    • "slim": "slim"

    • "haml": "haml"

    • "jte": "html"

    • "kte": "html"

  3. 要在 Slim 模板和 .haml 文件中启用 Tailwind CSS 类补全，请将 emmetCompletions 属性设置为 true。

    添加用于补全的自定义上下文

故障排除

如果您不再获得 Tailwind CSS 特定的代码辅助功能，可能是以下原因之一导致的：

Tailwind CSS 语言服务器已过时

Install the latest version of the Tailwind CSS Language Server as described above.

包含 @import 'tailwindcss' 的 CSS 文件已损坏

  1. 尝试将除 @import "tailwindcss" 之外的所有内容注释掉，保存 CSS 文件并重启服务器。

  2. 逐步删除注释、保存文件并重启服务器，直到定位到出现问题的代码片段。

Tailwind CSS 语言服务器无法启动

发生此类错误时，状态栏中的 语言服务 小部件和 Tailwind&#xa0;CSS 项将以 错误图标 标识。

Tailwind CSS 语言服务器错误

此类错误通常由于 Node.js 配置不正确导致。 要解决此问题：

  1. 按 Ctrl+Alt+S 打开设置，然后选择 语言与框架 | Node.js。

  2. 请确保 Node.js 解释器的路径正确。

在 配置 Node.js 解释器 中了解更多信息。

最后修改日期： 2025年 9月 26日
StylusJSON