通过为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，以获取尾风级别的名称。
尾风CSS语言模式
VS Code内置CSS语言模式的替代方案，即使使用特定于tailwind特定的在插曲时，它也可以维护完整的CSS Intellisense支持。还提供了语法定义，以便在所有CSS上下文中正确突出显示尾风特异性语法。
推荐的VS代码设置
文件。交往
使用files.sasociations设置来告诉VS代码以始终以尾风CSS模式打开.css文件：
\"files.associations\" : { \"*.css\" : \" tailwindcss \" }
editor.quicksuggestions
默认情况下，在编辑“字符串”内容时，例如在JSX属性值中，不会触发完成。更新编辑器。QuickSuggestions设置可能会改善您的经验：
\"editor.quickSuggestions\" : { \"strings\" : \" on \" }
扩展命令
尾风CSS：显示输出
显示语言服务器日志面板。此命令仅在有活动语言服务器实例时可用。
Tailwind CSS：排序选择（预释放）
当选择CSS类的列表时，该命令可用于按照与CSS中的顺序订购它们的顺序对其进行排序。仅当当前文档属于活动的尾风项目时，此命令才可用，而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/**”]
parwindcss.emmetCompletions
在使用Emmet式语法时，启用完成，例如Div.BG-RED-500.uppercase。默认值：false
tailwindcss.classattributes
提供类完整，悬停预览，绒毛等的HTML属性等
parwindcss.classfunctions
提供完成，悬停预览，绒毛等的功能。当前，这对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`
parwindcss.colordecorators
控制编辑器是否应为尾风CSS课程和辅助功能提供内联颜色装饰器。默认值：true
请注意，必须启用编辑器，以显示颜色装饰器。
tailwindcss.showpixelequalents
在完成和悬停中显示REM CSS值的PX当量。默认值：true
tailwindcss.rootfontsize
根字体大小以像素为单位。用于将REM CSS值转换为其PX当量。请参阅tailwindcss.showpixelequalents。默认值：16
tailwindcss.hovers
启用悬停。默认值：true
tailwindcss.suggestions
启用自动完成建议。默认值：true
tailwindcss.sodeyections
启用代码操作。默认值：true
tailwindcss.validate
启用绒毛。可以使用tailWindCS.lint设置分别配置规则：
- 忽略：完全禁用棉绒规则
- 警告：违反规则的行为将被视为“警告”，通常由黄色下划线表示
- 错误：违反规则的行为将被视为“错误”，通常由红色下划线表示
parwindcss.lint.invalidscreen
@Screen指令使用的未知屏幕名称。默认值：错误
tailwindcss.lint.invalidvariant
@Variants指令使用的未知变体名称。默认值：错误
tailwindcss.lint.invalidtailwinddirective
@TailWind指令使用的未知值。默认值：错误
tailwindcss.lint.invalidapply
@Apply指令的不支持使用。默认值：错误
tailwindcss.lint.invalidconfigpath
主题助手使用的未知或无效路径。默认值：错误
tailwindcss.lint.cssconflict
应用相同CSS属性或属性的同一HTML元素上的类名称。默认值：警告
tailwindcss.lint.RecommendedVariantOrder
类变体不在建议的顺序中（仅适用于JIT模式）。默认值：警告
tailwindcss.lint.usedblocklistedclass
通过@source而不是内联（…）的班级名称的使用。默认值：警告
partwindcss.inspectport
启用语言服务器的Node.js Inspector代理，并在指定的端口上侦听。默认值：null
实验扩展设置
实验设置可以随时更改或删除。
tailwindcss.expermentiment.configfile
默认值：null
此设置允许您手动指定CSS入口点（对于V4项目）或尾风配置文件（对于V3项目）。默认情况下，扩展程序尝试自动检测项目设置：
- 对于Tailwind CSS V4 ：扩展程序将您的项目扫描到CSS文件，并确定“ root” CSS文件。
- 对于Tailwind CSS V3（及以前） ：扩展程序会自动使用第一个tailwind.config。{JS，CJS，MJS，TS，CTS，CTS，MTS}文件。
如果IntelliSense无法检测您的项目，则可以使用此设置手动定义配置文件。
尾风CSS v4.x（CSS入口点）
对于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/** \" }
Tailwind CSS v3.x和更早的（配置文件）
对于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设置来明确说明您的样式图或配置路径。
