Tailwind CSS IntelliSense：为Visual Studio Code用户打造的Tailwind开发助手

Tailwind CSS IntelliSense是一款专为Visual Studio Code用户设计的扩展工具，通过提供自动完成、语法高亮、代码检查等功能，极大提升了在Tailwind CSS框架下的开发体验。

安装指南：

通过Visual Studio Code Marketplace安装 →

要激活该扩展，您必须在工作区内安装tailwindcss，并确保有一个名为tailwind.config.{js,cjs,mjs,ts,cts,mts}的Tailwind配置文件。

功能概览：

自动完成

智能提示类名、CSS函数和指令，提升开发效率。

代码检查

高亮显示CSS和标记中的错误和潜在问题。

悬停预览

通过悬停在Tailwind类名上查看其完整CSS。

Tailwind CSS语言模式

替代VS Code内置的CSS语言模式，支持使用Tailwind特定指令时仍保持完整的CSS IntelliSense功能。同时提供语法定义，使Tailwind特定语法在所有CSS上下文中正确高亮。

推荐的VS Code设置：

files.associations

使用files.associations设置，告诉VS Code始终以Tailwind CSS模式打开.css文件：

"files.associations": {
  "*.css": "tailwindcss"
}

editor.quickSuggestions

默认情况下，VS Code不会在编辑“字符串”内容时触发自动完成，例如在JSX属性值中。更新editor.quickSuggestions设置可能改善您的体验：

"editor.quickSuggestions": {
  "strings": "on"
}

扩展命令：

Tailwind CSS: 显示输出

显示语言服务器日志面板。只有在存在活动的语言服务器实例时可用。

Tailwind CSS: 排序选择（预发布版）

当选择一组CSS类时，可以使用此命令按Tailwind在CSS中排序的相同顺序对它们进行排序。仅当当前文档属于活动的Tailwind项目且tailwindcss版本为3.0.0或更高时可用。

扩展设置：

tailwindCSS.includeLanguages

此设置允许您添加额外的语言支持。每个条目的键是新的语言ID，值是扩展内置的任何一种语言，具体取决于您希望新语言如何被处理（例如html、css或javascript）：

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

tailwindCSS.files.exclude

配置要从所有IntelliSense功能中排除的全局模式。继承files.exclude设置中的所有全局模式。默认值：["**/.git/**", "**/node_modules/**", "**/.hg/**", "**/.svn/**"]

tailwindCSS.emmetCompletions

启用使用Emmet风格语法时的自动完成，例如div.bg-red-500.uppercase。默认值：false

tailwindCSS.classAttributes

为其提供类完成、悬停预览、代码检查等的HTML属性。默认值：class, className, ngClass, class:list

tailwindCSS.classFunctions

在其中提供完成、悬停预览、代码检查等的函数。目前，这在JavaScript/TypeScript中的函数调用和标记模板文字中均有效。

示例：

{
  "tailwindCSS.classFunctions": ["tw", "clsx"]
}

let classes = tw`flex bg-red-500`
let classes2 = clsx([
  "flex bg-red-500",
  { "text-red-500": true }
])

tailwindCSS.colorDecorators

控制编辑器是否应为Tailwind CSS类和辅助函数渲染内联颜色装饰器。默认值：true

注意，必须启用editor.colorDecorators才能显示颜色装饰器。

tailwindCSS.showPixelEquivalents

在完成和悬停中显示rem CSS值的px等效值。默认值：true

tailwindCSS.rootFontSize

根字体大小（以像素为单位）。用于将rem CSS值转换为其px等效值。参见tailwindCSS.showPixelEquivalents。默认值：16

tailwindCSS.hovers

启用悬停功能。默认值：true

tailwindCSS.suggestions

启用自动完成建议。默认值：true

tailwindCSS.codeActions

启用代码操作。默认值：true

tailwindCSS.validate

启用代码检查。可以使用tailwindcss.lint设置单独配置规则：

• ignore：完全禁用lint规则
• warning：规则违反将被视为“警告”，通常以黄色下划线表示
• error：规则违反将被视为“错误”，通常以红色下划线表示

tailwindCSS.lint.invalidScreen

使用@screen指令时使用了未知的屏幕名称。默认值：error

tailwindCSS.lint.invalidVariant

使用@variants指令时使用了未知的变体名称。默认值：error

tailwindCSS.lint.invalidTailwindDirective

使用@tailwind指令时使用了未知的值。默认值：error

tailwindCSS.lint.invalidApply

不支持使用@apply指令。默认值：error

tailwindCSS.lint.invalidConfigPath

使用theme助手时使用了未知或无效的路径。默认值：error

tailwindCSS.lint.cssConflict

同一个HTML元素上的类名应用了相同的CSS属性或属性。默认值：warning

tailwindCSS.lint.recommendedVariantOrder

类变体不在推荐的顺序中（仅在JIT模式下应用）。默认值：warning

tailwindCSS.inspectPort

为语言服务器启用Node.js检查器代理并监听指定的端口。默认值：null

实验性扩展设置：

实验性设置可能随时更改或删除。

tailwindCSS.experimental.configFile

默认值：null

此设置允许您手动指定CSS入口点（适用于v4项目）或Tailwind配置文件（适用于v3项目）。默认情况下，扩展尝试自动检测您的项目设置：

• 对于Tailwind CSS v4：扩展扫描您的项目以查找CSS文件，并确定“根”CSS文件。
• 对于Tailwind CSS v3（及更早版本）：扩展自动使用找到的第一个tailwind.config.{js,cjs,mjs,ts,cts,mts}文件。

如果IntelliSense无法检测到您的项目，您可以使用此设置手动定义您的配置文件。

Tailwind CSS v4.x（CSS入口点）

对于v4项目，指定作为Tailwind入口点的CSS文件。

如果您的项目包含单个CSS入口点，请将此选项设置为字符串：

"tailwindCSS.experimental.configFile": "src/styles/app.css"

对于具有多个CSS入口点的项目，请使用对象，其中每个键是文件路径，每个值是代表其应用到的文件的全局模式（或模式数组）：

"tailwindCSS.experimental.configFile": {
  "packages/a/src/app.css": "packages/a/src/**",
  "packages/b/src/app.css": "packages/b/src/**"
}

Tailwind CSS v3.x及更早版本（配置文件）

对于v3项目及以下版本，请指定Tailwind配置文件。

如果您的项目包含单个Tailwind配置，请将此选项设置为字符串：

"tailwindCSS.experimental.configFile": ".config/tailwind.config.js"

对于具有多个配置文件的项目，请使用对象，其中每个键是配置文件路径，每个值是代表其应用到的文件的全局模式（或模式数组）：

"tailwindCSS.experimental.configFile": {
  "themes/simple/tailwind.config.js": "themes/simple/**",
  "themes/neon/tailwind.config.js": "themes/neon/**"
}

故障排除：

如果您在激活IntelliSense功能时遇到问题，可以检查以下几点：

• 确保您的工作区中有Tailwind配置文件，并且命名为tailwind.config.{js,cjs,mjs,ts,cts,mts}。请参阅Tailwind文档以了解创建配置文件的详细信息。
• 确保通过npm、yarn或pnpm在工作区内安装了tailwindcss模块。
• 确保您的VS Code设置没有导致Tailwind配置文件被隐藏/忽略，例如通过files.exclude或files.watcherExclude设置。
• 通过从命令面板运行Tailwind CSS: 显示输出命令查看语言服务器输出。这可能显示阻止扩展激活的错误。