新手入门
在使用 Tailwind CSS 时可以改善开发者体验的插件和配置设置。
¥Syntax support
Tailwind CSS 使用大量自定义 CSS at 规则,如 @tailwind
、@apply
和 @config
,在许多编辑器中,这可能会在无法识别这些规则的情况下触发警告或错误。
¥Tailwind CSS uses a lot of custom CSS at-rules like @tailwind
, @apply
, and @config
, and in many editors this can trigger warnings or errors where these rules aren’t recognized.
这个问题的解决方案几乎总是为你的编辑器/IDE 安装一个插件来支持 PostCSS 语言而不是常规的 CSS。
¥The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS.
如果你使用的是 VS Code,我们的官方 Tailwind CSS 智能感知 插件包括一个专用的 Tailwind CSS 语言模式,它支持 Tailwind 使用的所有自定义规则和函数。
¥If you’re using VS Code, our official Tailwind CSS IntelliSense plugin includes a dedicated Tailwind CSS language mode that has support for all of the custom at-rules and functions Tailwind uses.
在某些情况下,如果你的编辑器对 CSS 文件中的语法要求非常严格,你可能需要禁用原生 CSS 代码检查/验证。
¥In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files.
¥IntelliSense for VS Code
Visual Studio Code 的官方 Tailwind CSS 智能感知 扩展通过为用户提供自动补齐、语法高亮和代码检查等高级功能来增强 Tailwind 开发体验。
¥The official Tailwind CSS IntelliSense extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.
自动补齐。类名智能建议,CSS 函数和指令。
¥Autocomplete. Intelligent suggestions for class names, as well as CSS functions and directives.
代码检查。高亮 CSS 和标记中的错误和潜在错误。
¥Linting. Highlights errors and potential bugs in both your CSS and your markup.
悬停预览。将鼠标悬停在 Tailwind 类名称上可查看完整的 CSS。
¥Hover Previews. See the complete CSS for a Tailwind class name by hovering over it.
语法高亮。提供语法定义,以便正确高亮 Tailwind 功能。
¥Syntax Highlighting. Provides syntax definitions so that Tailwind features are highlighted correctly.
查看项目 在 GitHub 上 以了解更多信息,或查看 将其添加到 Visual Studio Code 以立即开始。
¥Check out the project on GitHub to learn more, or add it to Visual Studio Code to get started now.
¥Automatic class sorting with Prettier
我们为 Tailwind CSS 维护了一个官方 Prettier 插件,它会自动按照我们的 推荐的类顺序 对你的类进行排序。
¥We maintain an official Prettier plugin for Tailwind CSS that automatically sorts your classes following our recommended class order.
它与自定义 Tailwind 配置无缝协作,并且因为它只是一个 Prettier 插件,所以它可以在 Prettier 工作的任何地方工作 - 包括每个流行的编辑器和 IDE,当然还有命令行。
¥It works seamlessly with custom Tailwind configurations, and because it’s just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.
<!-- 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>
查看插件 在 GitHub 上 以了解更多信息并开始使用。
¥Check out the plugin on GitHub to learn more and get started.
WebStorm、PhpStorm 等 JetBrains IDE 包括在 HTML 中和使用 @apply
时支持智能 Tailwind CSS 补全。
¥JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML and when using @apply
.