IntelliJ IDEA 2025.1 Help

Tailwind CSS

IntelliJ IDEA 集成了 Tailwind CSS 版本 4 框架，包括在 HTML 文件中补全 Tailwind 类、伪类变体的补全建议、在 HTML 和 CSS 文件中悬停类时预览生成的 CSS，或在自动补全时预览。

IntelliJ IDEA 识别 Tailwind CSS 指令 ，包括新引入的指令以及 Tailwind CSS 4 通配符变量。

对于早期版本，IntelliJ IDEA 能识别 tailwind.config.js 文件，并基于您对其进行的自定义提供补全。

开始之前

  1. 请确保您的计算机上安装了 Node.js。

  2. 请确保在 已安装 选项卡中的 设置 | 插件 页面启用 CSS 和 Tailwind CSS 捆绑插件，如 管理插件中所述。

安装并配置 Tailwind CSS

您可以根据应用程序中使用的框架，通过多种方式安装 Tailwind CSS 版本 4。 请从 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">

如果您计划在项目中使用 SvelteKit、 React Router 或 Nuxt ，建议使用 Vite 安装 Tailwind CSS。

  1. 请确保您已按照 在空项目中安装 Vite 和 在 IntelliJ IDEA 中配置 Vite 的描述安装并配置了 Vite。

  2. 打开嵌入的 终端 （Alt+F12 ），然后输入：

    npm install tailwindcss @tailwindcss/vite

  3. 要配置 @tailwindcss/vite 插件，请打开 Vite 配置文件 ，并向其中添加以下 import 语句：

    import tailwindcss from '@tailwindcss/vite'

    然后在 plugins 下添加以下行：

    plugins: [ tailwindcss(), ]

  4. 打开您希望使用 Tailwind CSS 的 CSS 文件，并向其中添加以下 import 语句：

    @import "tailwindcss";

  5. 重新启动 Tailwind CSS 服务器。 为此，请点击 语言服务 小部件，该小部件位于 状态 栏上，然后点击 重新启动服务器图标 ，位于 Tailwind CSS 项目旁边。

    重新启动 Tailwind CSS 服务器

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

请从 Tailwind CSS 官方网站 了解更多信息。

如果您在项目中使用 Next.js 或 Angular ，建议使用 PostCSS 安装 Tailwind CSS。

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

    npm install tailwindcss @tailwindcss/postcss postcss

  2. 要配置 @tailwindcss/postcss 插件，请打开 PostCSS 配置文件 ，并在 plugins 下添加以下行：

    plugins: { "@tailwindcss/postcss": {}, }

  3. 打开您希望使用 Tailwind CSS 的 CSS 文件，并向其中添加以下 import 语句：

    @import "tailwindcss";

  4. 重新启动 Tailwind CSS 服务器。 为此，请点击 语言服务 小部件，该小部件位于 状态 栏上，然后点击 重新启动服务器图标 ，位于 Tailwind CSS 项目旁边。

    重新启动 Tailwind CSS 服务器

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

请从 Tailwind CSS 官方网站 了解更多信息。

安装并配置 Tailwind CSS 3

  1. 打开嵌入的 终端 （Alt+F12）。

  2. 要安装 Tailwind CSS，请键入：

    npm install -D tailwindcss@3

  3. 要生成配置文件，请输入：

    npx tailwindcss init

    最终，将在您的项目根目录中创建一个 tailwind.config.js 配置文件。

请从 Tailwind CSS 版本 3 官方网站 了解更多信息。

配置 Tailwind CSS 语言服务器

从 IntelliJ IDEA 2024.3.2 开始，最新的 Tailwind CSS 语言服务器开箱即用。

对于早期版本，您需要手动配置 Tailwind CSS 语言服务器。

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

  2. 打开 设置 对话框（Ctrl+Alt+S ），转到 设置 | 语言与框架 | 样式表 | Tailwind CSS ，并在 语言服务器 字段中指定包的路径。

配置 Tailwind 选项

您还可以自定义默认的 Tailwind configuration options。 例如，您可能希望调整 HTML 属性 列表，以提供类完成项或使用实验性的 正则表达式格式 来指定应该触发完成项的其他位置。

  1. 打开 设置 对话框(Ctrl+Alt+S )并转到 语言与框架 | 样式表 | Tailwind CSS。

  2. 更新属性以添加配置选项。

编辑您的 tailwind.config.js

IntelliJ IDEA 基于您通过 tailwind.config.js 配置文件进行的自定义提供代码补全。 例如，如果您定义了带有新颜色的自定义主题，则将在完成弹出窗口中显示带有自定义颜色名称的新生成类。

基于 tailwind.config.js 中的定制完成

完成 Tailwind 类

IntelliJ IDEA 在 HTML 文件和 CSS 文件中的 @apply 指令后提供 Tailwind 类的自动补全。

@apply 指令后完成 Tailwind 类

IntelliJ IDEA 在 JavaScript 字符串常量中提供 Tailwind 类的补全建议。

JavaScript 字符串字面量中 Tailwind 类的补全

伪类变体也会显示补全建议。

伪类变体的补全建议

预览结果 CSS

当您将鼠标悬停在 HTML 或 CSS 文件中的 Tailwind 类上时，IntelliJ IDEA 会向您显示一个 文档 弹出窗口，其中包含生成的 CSS 预览。 要在工具窗口中查看预览，请点击 更多按钮 并选择 在文档工具窗口中显示。

CSS 预览

您完成代码时，预览也会显示在 文档 弹窗 Ctrl+Q 中。

预览完成代码时生成的 CSS

在自定义上下文中补全 Tailwind 类

IntelliJ IDEA 可以在 Slim 模板、 .haml 、 .jte 和 .kte 文件中提供 Tailwind 类的补全功能。

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

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

    • "slim": "slim"

    • "haml": "haml"

    • "jte": "html"

    • "kte": "html"

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

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

Tailwind CSS 指令

IntelliJ IDEA 识别 Tailwind CSS 指令 ，包括新引入的指令，例如， @plugin、 @theme、 @source 和 @variant。

对于在 Tailwind CSS 4 中使用的常规 CSS @import 指令，而不是 @tailwind 指令，IntelliJ IDEA 还提供了补全功能。

支持带有参数的增强型 @import 语句，例如， @import "tailwindcss" @source("../src");。

WTailwind CSS 4 通配符变量

IntelliJ IDEA 识别 Tailwind CSS 通配符变量，例如， --*: initial 和 --font-*: initial。

最后修改日期： 2025年 4月 24日
触控笔数据库工具与 SQL