Sublime Text怎么配置Tailwind CSS_Sublime Text前端开发智能提示插件【必备】-sublime-PHP中文网

必须安装tailwind css intellisense（作者bradlc），配置tailwind.config.js在项目根目录、用module.exports导出、content显式含扩展名，并禁用emmet干扰，三者缺一不可。

sublime text怎么配置tailwind css_sublime text前端开发智能提示插件【必备】

装对插件、配对路径、关掉 Emmet，三者缺一不可；否则 class=" 后光标停住，什么都不会出来。

该装哪个插件才真正生效

只认 Tailwind CSS IntelliSense（作者 bradlc），别碰 sublime-tailwindcss 或 Tailwind CSS Autocomplete——前者已归档不维护，后者遇到 v4 的 config({}) 函数式写法直接崩溃，连 theme.extend 都读不出来。

安装方式：Ctrl+Shift+P → 输入 Package Control: Install Package → 搜索并安装 Tailwind CSS IntelliSense。安装后无需重启，但必须确保项目根目录存在 tailwind.config.js。

插件不支持 .cjs 或 .ts 后缀，只认 tailwind.config.js
导出必须是 module.exports = { content: [...] }，不是 export default
若用 ESM（export default），需在 package.json 中加 "type": "module"，否则插件加载失败且无报错

tailwind.config.js 放哪、怎么写才被识别

Sublime 插件不会向上查找或递归扫描，它只读你用 subl . 打开的那一层目录下的 tailwind.config.js。放错位置等于没配。

content 字段必须显式列出扩展名，例如：["./src/**/*.{html,js,jsx,ts,tsx}"]。写成 ["./src/**/*"] 会导致插件无法匹配任何文件，类名索引为空，补全静默失效。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

路径中不能含 ../，必须是相对当前项目根的路径
如果模板在 pages/ 或 app/ 下，也要明确写进 content 数组
配置里避免 require('xxx') 或同步文件读取（如 fs.readFileSync），插件加载失败时不会提示，只会退化为默认类名集

为什么 JSX/TSX 里 className 没提示

插件默认只在 .html 文件中激活补全。你在 .jsx 或 .tsx 里写 className，不额外配语法作用域，就完全不触发。

需在 Sublime 的用户设置（Preferences → Settings）中添加以下字段：

{
  "class_attribute_regex": "(class|className|class:list)=\"([^\"]*)\"",
  "additional_syntaxes": [
    "Packages/React JSX/React JSX.sublime-syntax",
    "Packages/TypeScript-TSX/TypeScriptReact.sublime-syntax"
  ]
}

class_attribute_regex 控制哪些属性名能触发补全，class:list 是 Svelte 场景，按需保留
additional_syntaxes 路径必须精确，大小写敏感；用 Package Control 安装过 React JSX 和 TypeScript-TSX 插件才能生效
改完设置后需关闭再重开文件，或重启 Sublime，否则新规则不加载