编辑器设置

编辑器设置

插件和配置设置可改善与 Tailwind CSS 一起工作的开发者体验。

语法支持

Tailwind CSS 使用了许多自定义 CSS at-规则，如 @tailwind、@apply 和 @screen,并且在许多编辑器中，这些规则无法识别时可能会触发警告或错误。

解决此问题的方法几乎总是安装一个插件以为您的编辑器/ IDE提供PostCSS语言支持，而不是常规CSS。

如果您正在使用 VS Code,我们的官方 Tailwind CSS 智能感知插件包括一个专门的 Tailwind CSS 语言模式，该模式支持 Tailwind 使用的所有自定义at-规则和函数。

在某些情况下，如果您的编辑器对 CSS 文件中的语法要求非常严格，您可能需要禁用本地 CSS linting/验证功能。

VS Code 的智能感知功能。

官方的 Tailwind CSS 智能感知扩展程序为 Visual Studio Code 提供了高级功能，如自动完成、语法高亮和linting,从而增强了 Tailwind 开发体验。

• 自动完成：智能建议类名，以及CSS功能和指令。

• Linting:高亮显示您的CSS和标记中的错误和潜在错误。

• 悬停预览：将鼠标悬停在Tailwind类名上，即可查看完整的CSS代码。

• 语法高亮：提供语法定义，以正确突出显示Tailwind特性。

自动使用 Prettier 进行类排序。

我们为 Tailwind CSS 维护了官方的 Prettier 插件，该插件将自动按照我们的推荐类顺序对您的类进行排序。

它可以与自定义的 Tailwind 配置无缝协作，而且由于它只是一个 Prettier 插件，因此可以在 Prettier 可以工作的地方使用，包括每个流行的编辑器和 IDE,当然也可以在命令行中使用。

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

JetBrains 编辑器

JetBrains IDE,例如 WebStorm、PhpStorm 等，在 HTML 中以及使用 @apply 时都支持智能的 Tailwind CSS 自动补全。