使用 Tailwind 开发时我使用的 4 个 VSCode 扩展

TL;DR

所有这些扩展都可以在 VSCode 扩展包TailwindCSS Kit中找到

1. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 是一款强大的工具，可以帮助开发者更快、更高效地编写代码。该工具为 Tailwind CSS 类提供实时建议，从而减少错误并提升代码质量。通过使用 IntelliSense，开发者可以提高生产力、缩短学习周期并提升应用程序的可访问性。如果您是使用 Tailwind CSS 的开发者，请务必充分利用这一强大功能。

2.顺风折叠

这款扩展在使用 Tailwind 时非常有用。冗长的类列表会让 html 部分显得杂乱，而这款扩展可以很好地隐藏它们，仅在需要时显示。除了默认功能外，它的选项也经过深思熟虑，几乎可以满足任何偏好。例如，我喜欢点击行而不是点击类本身时展开类，而这款扩展就提供了这样的选项。

我给这个扩展打了五星好评，但有一个问题我希望它能改进。我使用 eslint 和eslint tailwind 插件，它可以将长类拆分成多行。但这个扩展似乎无法折叠跨越多行的类。

3. Tailwind 文档

Tailwind 文档扩展可快速访问官方 Tailwind CSS 文档。此扩展使开发者能够直接从 VSCode 编辑器内部访问 Tailwind CSS 文档，而无需打开浏览器或离开编辑器。

4. Tailwind 配置查看器

Tailwind 配置可能会令人困惑。它们可能会呈指数级增长，使用户更难理解已解析的配置。这就是我创建此扩展的原因。它使用户能够查看已解析的Tailwind 配置，并且还会显示任何与颜色相关的类（text-*、bg-*、accent-* 等）的颜色。

将来，我计划使这些类可点击，这样当用户点击某个类时，它将被插入到 html 部分。

👥连接
Twitter：@kalimahapps
GitHub：KalimahApps
网站：https://kalimah-apps.com/
CodePen：https://codepen.io/khr2003

我的其他帖子

• PHPTaqwim：使用 Typescript 对 PHP 进行 Lint 和格式化！
• 8 个 CSS 辅助工具
• 纯 CSS 中的 PS4 控制器
• iPhone 12 vs. Galaxy S21。玻璃态设计