问题描述:

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

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

解决方案:

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

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

原理:

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

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐