你是否会遇到这样的情况,你使用的是 Tailwind CSS v4,在 VS Code 中添加了 Tailwind CSS IntelliSense 插件,想要智能提示 Tailwind CSS v4 CSS 类,但是不论怎么设置也不起作用。把 Tailwind CSS IntelliSense 插件的文档看了一遍又一遍,也没有发现问题。

在 VS Code 中添加了 Tailwind CSS IntelliSense 插件后,做了所有的配置:

使用 npm 在项目的根目录下安装了 tailwind css 在一个以 .css 结尾的文件中导入了 tailwind (如包含:@import "tailwindcss";) 配置了 quickSuggestions 配置了 configFile 其他配置默认也是开启状态

但是:打开 html 文件就是不能智能提示 Tailwind CSS 语法。

Tailwind CSS IntelliSense 插件无法智能提示的原因

Tailwind CSS IntelliSense 插件要求文件必须以 .css 结尾,对文件名称没有做出特殊的要求,但是文件名中包含 css 字符就无法正确识别文件。

实现 Tailwind CSS 插件智能提示

在我们知道 Tailwind CSS IntelliSense 插件无法智能提示的原因后,解决方法也很简单:

删除 CSS 文件名中包含的 css 字符。

结语

在本文中讲述了在 VS Code 中安装了 Tailwind CSS IntelliSense 插件后,做了所有的配置后,配置也正确,但是就是无法实现智能提示的解决方法。