tailwind css智能提示需依次完成五步配置：一、安装package control包管理器；二、安装tailwind css intellisense插件；三、生成并配置项目级tailwind.config.js文件；四、将html/jsx/tsx文件关联至对应语法；五、验证class/classname输入时的补全与悬停提示是否生效。
如果您在Sublime Text中编写前端代码，但无法获得Tailwind CSS类名的自动补全与智能提示，则可能是由于未正确安装或配置Tailwind CSS插件。以下是实现Tailwind CSS智能提示的具体步骤：
一、安装Package Control
Package Control是Sublime Text的包管理器，用于安装和管理所有第三方插件。若尚未安装，需先完成此基础组件部署。
1、按下 Ctrl+`（Windows/Linux）或 Cmd+`（macOS）打开Sublime控制台。
2、将官方提供的Python安装脚本粘贴至控制台并回车执行，脚本地址为 https://packagecontrol.io/installation#st4。
3、重启Sublime Text，通过 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）调出命令面板，输入 Package Control: Install Package 并确认执行，验证安装成功。
二、安装Tailwind CSS IntelliSense插件
Tailwind CSS IntelliSense是官方推荐的语言服务器插件，提供类名补全、语法高亮、颜色预览等核心功能，依赖Node.js环境运行。
1、确保系统已安装 Node.js v14.0.0 或更高版本，可在终端执行 node -v 验证。
2、在命令面板中输入 Package Control: Install Package，回车后搜索 Tailwind CSS IntelliSense，点击安装。
3、安装完成后，Sublime会自动启用该插件，无需手动启用。
三、配置项目级tailwind.config.js文件
IntelliSense插件需读取项目根目录下的 tailwind.config.js 文件以识别自定义配置（如颜色、间距、插件等），否则仅支持默认类名提示。
1、在项目根目录下执行 npx tailwindcss init 生成基础配置文件。
2、打开生成的 tailwind.config.js，确认 content 字段包含所有模板文件路径，例如：content: ["./src/**/*.{html,js,jsx,ts,tsx}"]。
3、保存文件，插件将在数秒内重新加载配置并启用对应上下文提示。
四、启用HTML/JSX/TSX语法支持
Sublime默认HTML语法不触发Tailwind类名解析，需将文件关联至支持插件的语法类型，确保类名能被正确识别与提示。
1、打开一个HTML文件，点击右下角当前语法名称（如 HTML）。
2、在弹出菜单中选择 Open all with current extension as… → HTML (Tailwind)（若无此项，请先安装 HTML-CSS-Class-Completion 插件辅助识别）。
3、对JSX/TSX文件，依次进入 View → Syntax → Open all with current extension as → JavaScript (React JSX) 或对应TypeScript语法。
五、验证智能提示是否生效
完成上述配置后，在支持的文件中输入 class=" 或 className="，应立即触发下拉候选列表，显示匹配的Tailwind类名及实时预览效果。
1、在HTML文件中输入 class="text-"，观察是否出现 text-sm、text-blue-500 等选项。
2、在JSX中输入 className="bg-"，确认是否列出所有背景色变体及hover/focus等状态修饰符。
3、将光标悬停于已写入的类名上，检查是否显示对应CSS属性的悬浮提示信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
