当前位置:   article > 正文

vscode 插件 Tailwind CSS IntelliSense 解决 class 提示问题

tailwind css intellisense

问题描述:

如下写js字符串是没有class智能提示的:

const clsName = 'bg-[#123456] text-[#654321]'
return <div className={clsName}></div>
  • 1
  • 2

解决方案:

  1. 安装 clsx 依赖
pnpm i clsx
  • 1
  1. 设置 vscode 的 settings.json
{
  "tailwindCSS.experimental.classRegex": [
    [
      "clsx\\(([^)]*)\\)",
      "(?:'|\"|`)([^']*)(?:'|\"|`)"
    ]
  ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

之后就有提示了
在这里插入图片描述

原理:

就是通过 Tailwind CSS IntelliSense 插件配置 "clsx\\(([^)]*)\\)" 正则匹配到了就显示提示

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/427894
推荐阅读
相关标签
  

闽ICP备14008679号