编辑器设置

Cursor

需要配置一个扩展程序和一个插件：

• Tailwind CSS IntelliSense；
  • 官方的 Tailwind CSS IntelliSense 插件；
  • bradlc 是它在 Cursor Marketplace 中的 publisher ID；
  • 在 VS Code 显示的是：Tailwind Labs；
  • 需要注意 Cursor 和 VS Code 在扩展程序 Publisher 显示上的差异；
• prettier-plugin-tailwindcss；
  • 在 Prettier 格式化代码时，自动按照 Tailwind 推荐的顺序重新排列 class；

比如：

<div className="text-white p-4 flex bg-black items-center rounded-lg">

经过 Prettier + prettier-plugin-tailwindcss 格式化后，它可能被整理成类似：

<div className="flex items-center rounded-lg bg-black p-4 text-white">

没有修改视觉效果，主要是在规范 Tailwind utility class 的排列顺序。

扩展程序

bradlc.vscode-tailwindcss
│
├─ 编辑器插件
├─ IntelliSense
├─ class 自动补全
├─ hover 提示
├─ Tailwind 语法支持
└─ 编辑阶段工作

如果出现：CSS 语法检查器不认识 Tailwind CSS 的自定义 at-rule，比如波浪线，内容类似：

Unknown at rule @plugincss(unknownAtRules)

1. 安装官方的扩展；
2. 检查.css文件的右下角是否被识别为CSS；
3. 如果被识别为CSS，将其调整为Tailwind CSS；
4. 最好的方式是：点击“Select Language Mode”，弹出的面板点击“Configure file association for .css”；
5. 在弹出的面板中选择“Tailwind CSS”，这样下次打开就不会重新配置；
6. 上面的步骤可以解决波浪线的问题，不过在格式化的时候，会提示：“There is no fromatter for Tailwind CSS”；
7. 此时需要安装扩展：Prettier - Code formatter，即可解决格式化问题；

插件

prettier-plugin-tailwindcss
│
├─ npm/pnpm package
├─ Prettier 插件
├─ 自动排序 Tailwind classes
└─ 格式化阶段工作

安装

# npm
npm install -D prettier prettier-plugin-tailwindcss
 
# pnpm
pnpm add -D prettier prettier-plugin-tailwindcss
 
# bun
bun add -D prettier prettier-plugin-tailwindcss
 
# yarn
yarn add -D prettier prettier-plugin-tailwindcss

在 .prettierrc 文件中添加：

{
    "plugins": ["prettier-plugin-tailwindcss"]
}