tailwindcss intellisense

通过为Visual Studio代码用户提供高级功能，例如自动完成，语法突出显示和覆盖，Tailwind CSS Intellisense通过为Visual Studio Code用户提供了尾风的开发体验。

通过Visual Studio代码市场安装→

为了使扩展激活要激活，您必须安装尾windcs，其中之一是：

• 对于V4及以后，导入尾风CSS样式表的.CSS文件（例如@Import“ TailWindCSS”）
• 对于V3及更早，您的工作空间中的Tailwind CSS配置文件名为TailWind.Config。{JS，CJS，MJS，TS，CTS，MTS}。
• 对于V3和更早，通过@Config指向配置文件的样式表

班级名称以及CSS功能和指令的智能建议。

突出显示您的CSS和标记中的错误和潜在错误。

通过徘徊在上面，请参见完整的CSS，以获取尾风级别的名称。

VS Code内置CSS语言模式的替代方案，即使使用特定于tailwind特定的在插曲时，它也可以维护完整的CSS Intellisense支持。还提供了语法定义，以便在所有CSS上下文中正确突出显示尾风特异性语法。

使用files.sasociations设置来告诉VS代码以始终以尾风CSS模式打开.css文件：

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

默认情况下，在编辑“字符串”内容时，例如在JSX属性值中，不会触发完成。更新编辑器。QuickSuggestions设置可能会改善您的经验：

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

显示语言服务器日志面板。此命令仅在有活动语言服务器实例时可用。

当选择CSS类的列表时，该命令可用于按照与CSS中的顺序订购它们的顺序对其进行排序。仅当当前文档属于活动的尾风项目时，此命令才可用，而tailwindcss版本为3.0.0或更高。

此设置使您可以添加其他语言支持。每个条目的关键是新的语言ID，值是内置语言的任何一种扩展语言，具体取决于您希望对新语言进行处理（例如HTML，CSS或JavaScript）：

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

配置球模式以排除所有IntelliSense功能。从files.exclude设置继承所有球模式。默认值：[“ **/。git/**”，“ **/node_modules/**”，“ **/。hg/**”，“ **/。svn/**”]

在使用Emmet式语法时，启用完成，例如Div.BG-RED-500.uppercase。默认值：false

提供类完整，悬停预览，绒毛等的HTML属性等

提供完成，悬停预览，绒毛等的功能。当前，这对javascript / tyspript中的功能调用和标记的模板文字都起作用。

每个条目都被视为在函数名称上匹配的正则格式。您无法在功能名称之前或之后的内容上匹配 - 匹配仅限于功能名称。

例子：

{
  "tailwindCSS.classFunctions" : [ " tw " , " clsx " , " tw \ .[a-z-]+ " ]
}

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

控制编辑器是否应为尾风CSS课程和辅助功能提供内联颜色装饰器。默认值：true

请注意，必须启用编辑器，以显示颜色装饰器。

在完成和悬停中显示REM CSS值的PX当量。默认值：true

根字体大小以像素为单位。用于将REM CSS值转换为其PX当量。请参阅tailwindcss.showpixelequalents。默认值：16

启用悬停。默认值：true

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

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

启用绒毛。可以使用tailWindCS.lint设置分别配置规则：

• 忽略：完全禁用棉绒规则
• 警告：违反规则的行为将被视为“警告”，通常由黄色下划线表示
• 错误：违反规则的行为将被视为“错误”，通常由红色下划线表示

@Screen指令使用的未知屏幕名称。默认值：错误

@Variants指令使用的未知变体名称。默认值：错误

@TailWind指令使用的未知值。默认值：错误

@Apply指令的不支持使用。默认值：错误

主题助手使用的未知或无效路径。默认值：错误

应用相同CSS属性或属性的同一HTML元素上的类名称。默认值：警告

类变体不在建议的顺序中（仅适用于JIT模式）。默认值：警告

通过@source而不是内联（…）的班级名称的使用。默认值：警告

启用语言服务器的Node.js Inspector代理，并在指定的端口上侦听。默认值：null

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

默认值：null

此设置允许您手动指定CSS入口点（对于V4项目）或尾风配置文件（对于V3项目）。默认情况下，扩展程序尝试自动检测项目设置：

• 对于Tailwind CSS V4 ：扩展程序将您的项目扫描到CSS文件，并确定“ root” CSS文件。
• 对于Tailwind CSS V3（及以前） ：扩展程序会自动使用第一个tailwind.config。{JS，CJS，MJS，TS，CTS，CTS，MTS}文件。

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

对于V4项目，请指定用作您的尾风入口点的CSS文件。

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

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

对于具有多个CSS入口点的项目，请使用一个对象，其中每个密钥是一个文件路径，每个值是代表其适用的文件的glot模式（或模式数组）：

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

对于V3项目及以下，请改为指定尾风配置文件。

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

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

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

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

如果您有问题要激活Intellisense功能，则可以检查一些事情：

• 您必须通过NPM，PNPM或纱线在工作区中安装了parwindcss。然后，扩展名将尝试检测您的尾风CSS配置，该配置可以位于以下内容之一：
  • 对于Tailwind CSS V4项目，使用@Import“ TailWindCSS”之类的指令直接在您的主CSS文件中定义的配置；和@theme {...}。不支持少，Sass或手写笔之类的预处理器文件。 Intellisense函数需要一个.css文件。
  • 对于Tailwind CSS V3及更早，在您的工作区中的tailwind CSS配置文件的名称匹配（TailWind.Config。{JS，CJS，MJS，MJS，TS，CTS，MTS，MTS}），或者通过@Config指向配置文件的样式图。
• 确保您的VS代码设置不会导致您的样式表或尾风CSS配置文件被隐藏/忽略，例如通过files.exclude，files.watchere.watchere.watcherexclude或tailwindcss.filess.files.files.exclude.Exclude设置。
• 通过运行命令调色板的Tailwind CSS：Show Outper命令来查看语言服务器输出。这可能显示出阻止扩展激活的错误。
• 对于具有多个安装尾风CSS的项目，多个配置文件或带有@Import“ partwindcss”的几个样式表，我们建议使用tailwindcss.s.experiment.configfile设置来明确说明您的样式图或配置路径。