入门
用于在使用 Tailwind CSS 时提高开发者体验的工具。
Tailwind CSS 使用自定义 CSS 语法,例如 @theme
、@variant
和 @source
,在某些编辑器中,这可能会触发警告或错误,因为这些规则无法被识别。
如果您正在使用 VS Code,我们官方的 Tailwind CSS IntelliSense 插件包含一个专用的 Tailwind CSS 语言模式,该模式支持 Tailwind 使用的所有自定义 at-rules 和函数。
在某些情况下,如果您的编辑器对 CSS 文件中期望的语法非常严格,您可能需要禁用原生 CSS 语法检查/验证。
Visual Studio Code 的官方 Tailwind CSS IntelliSense 扩展通过为用户提供诸如自动完成、语法高亮和语法检查等高级功能来增强 Tailwind 的开发体验。
查看 GitHub 上的 项目 以了解更多信息,或 将其添加到 Visual Studio Code 以立即开始使用。
我们维护一个官方的 Prettier 插件 用于 Tailwind CSS,它可以按照我们 推荐的类顺序 自动对您的类进行排序。
它可以与自定义 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">Submit</button><!-- After --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>
查看 GitHub 上的 插件 以了解更多信息并开始使用。
JetBrains IDE(如 WebStorm、PhpStorm 等)在您的 HTML 中包含对智能 Tailwind CSS 完成的支持。