tl; dr

本文提供了有关如何启用VSCODE中tailwindcss类的自动完成和悬停的Intellisense的说明。为此，用户必须在与所需的自定义HTML属性（可变名称）的VSCODE设置中添加正则态度。

如果您已经使用TailwindCSS开发应用程序了一段时间，那么您不可避免地会或必须已经在VSCODE中遇到此问题。

问题ð§

当您将className分配给div时，当您悬停在添加的尾风类别上时，您将获得自动完成和应用的CSS样式。

â€toy：Tailwind CSS IntelliSense VScode extension必须安装在您的VScode中以获得自动完成并悬停Intellisense。

但是，如果您创建一个称为containerClass的变量，然后尝试为其分配尾风级别，那么您将不会获得相同的智能意识，这对大多数人来说是可以的，但是如果您是像生产力一样的狂热者我，这是不可接受的！

首先，让我们尝试了解为什么containerClass不获得相同的推断。

为什么

tailwind CSS Intellisense vscode扩展，默认情况下仅查看class，className和ngClass HTML属性，以提供类完整，悬停预览，linting，linting等。

。

。

我们可以通过在我们的VSCODE设置中搜索tailwindcss来对此进行检查，第一个结果向我们显示了提供哪种类别，Hover Previews，linting等的默认HTML属性。

因此，当我们为变量分配尾风类时，我们不会获得类完整的完整和悬停预览。

溶液ð°

到目前

在设置中，搜索tailwindcss后，我们需要：

1. 单击添加项目按钮

2. 添加匹配所需的自定义HTML属性（变量名）-.*Class，.*ClassName。

完成！

现在，当您将尾风类分配给以Class或div的结尾。

时，您应该能够获得课程完成和悬停预览。

结语ð»

对于大多数人来说，这可能不是最重要的，但是我一直在寻找我的发展经验中最小的改进！随时分享您可能对我有任何建议ð。

---

最初，我的计划是撰写有关此主题的Twitter线程。但是，经过考虑，我发现推文不是很容易搜索。结果，我决定写一篇更深入的博客文章。

如果您喜欢这样的快速提示，那么您也可能喜欢我的其他博客文章。我还分享了很多React，JavaScript，TypeScript，Expo，NextJs在我的twitter上的内容。

感谢您抽出宝贵的时间阅读此博客！非常感谢您的支持。