跳到主要内容

IDE 智能提示设置

VS Code

首先,确保你已经安装 Tailwind CSS IntelliSense 插件

js,jsx,ts,tsx,vue...这类文件的智能提示

配置好插件后,我们在写代码时,写到那些标签中的 class=,className=,这种场景时,智能提示一下子就可以出来。

然而我们在写 js 代码的时候,很多时候是直接在代码里,去写 tailwindcss 字符串字面量,比如:

const clsName = 'bg-[#123456] text-[#654321]'

return <div className={clsName}></div>

写这种字符串是没有任何的智能提示的,怎么办呢?

这里给出一种基于插件的解决方案:

  1. 安装 clsx:
<npm|yarn|pnpm> i clsx
  1. 进入你的 vscode 设置的 settings.json

在里面加入下方的配置:

{
"tailwindCSS.experimental.classRegex": [
[
"clsx\\(([^)]*)\\)",
"(?:'|\"|`)([^']*)(?:'|\"|`)"
]
]
}

这样配置之后,智能提示就出来了:

智能提示

Refer link

这种原理也是依赖正则匹配,即 Tailwind CSS IntelliSense 插件 匹配到了当前 vscode 活动的文本域中,存在着 clsx() 方法这个关键词,所以就把智能提示给注入进去。

所以你这样写就不会生效:

import { clsx as AAA } from 'clsx'

const btn = AAA('')

另外,你可以依据这个特性,修改/添加 "tailwindCSS.experimental.classRegex" 里的正则,然后自行封装一个方法,用来进行 tailwindcss 的智能提示。

wxml 的智能提示

我们知道 tailwindcss 最佳实践,是要结合 vscode/webstorm提示插件一起使用的。

假如你遇到了,在 vscodewxml 文件中,编写 class 没有出智能提示的情况,可以参考以下步骤。

这里我们以 vscode 为例:

安装 WXML - Language Services 插件(一搜 wxml 下载量最多的就是了)

接着找到 Tailwind CSS IntelliSense 插件的 扩展设置

include languages,手动标记 wxml 的类型为 html

如图所示

智能提示就出来了:

智能提示

WebStorm

vscode 方式类似,同样使用 clsx 函数

  1. 确保你的版本大于等于 WebStorm 2023.1

  2. 打开设置,前往 Languages and Frameworks | Style Sheets | Tailwind CSS

  3. 添加以下的配置:

{
"experimental": {
"classRegex": ["clsx\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
}
}

如果你使用 class-variance-authoritycva 函数,只需再添加 "cva\\(([^)]*)\\)" 正则即可。

HbuilderX

https://ext.dcloud.net.cn/plugin?id=8560