vscode能正常使用tailwind插件但没有智能提示问题【2022-6-28已解决】

原创 已于 2023-01-28 15:02:53 修改 · 6.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #javascript #前端

于 2022-06-28 23:16:00 首次发布
博客作者遇到了在Visual Studio Code中使用TailwindCSS时的配置困扰，尝试了安装stylelint、PostCSSLanguageSupport、HTMLCSSSupport等插件以及修改settings.json文件，但问题未得到解决。最终通过安装unocss插件并重启VSCode成功解决了问题。文章还提到了卸载和重装TailwindCSS及相关依赖的尝试。

在这里插入图片描述

解决方法：装个unocss 插件即可，记得重启

尝试过的方法：

  • 安装插件：根据度娘安装stylelint，PostCSS Language Support，HTML CSS Support extension都不行
  • 修改setting.json文件：大致修改过的配置以下，都不行，一直怀疑是配置项冲突，这里捣鼓了很久都没解决
"editor.quickSuggestions": {
    "strings": true
},

"tailwindCSS.includeLanguages": {
   "html": "html",
   "javascript": "javascript",
   "css": "css"
},
"editor.quickSuggestions": {
   "strings": true
}
"explorer.confirmDelete":true,
npm uninstall tailwindcss postcss autoprefixer
  • 卸载重装：npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 不行
  • 修改联机服务配置项：跟之前修改设置勾选项一样，不行

最后，祝成功

雨燕容若
关注
Vue3 - 超详细引入 tailwindcss 及使用教程，安装配置 tailwindcss 框架到项目中的详细步骤流程教学（附带 VScode 编辑器智能提示语法插件 / 个性化配置方法）
🏆 前端领域优质创作者
09-07 1万+
vue3tailwindcss，vue3引入使用tailwindcss，vue3vite项目引入tailwindcss详细教程，vue3tailwindcss的使用教程，vue3tailwindcss的使用，vue3如何引入tailwindcss，vue3引入tailwindcss报错怎么办，在vue3项目中使用tailwindcss框架插件，Vue3如何使用并设置TailwindCSS，vue3tailwindcss怎么在vscode中进行语法提示，vscode安装什么插件能提示tailwin
VSCode 2025最新前端开发必备插件推荐汇总（提效指南）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-11 4973
VSCode 2025最新前端开发必备插件推荐（提效指南）
vscode 插件 Tailwind CSS IntelliSense 解决 class 提示问题
舜岳的博客
01-31 3206
就是通过 Tailwind CSS IntelliSense 插件配置。正则匹配到了就显示提示。
VSCodium中的Tailwind CSS：自动补全与配置技巧
最新发布
gitblog_00186的博客
10-07 411
你是否在使用VSCodium编写Tailwind CSS时遇到过类名记忆困难、属性补全不精准的问题？本文将从环境配置到高级技巧，全面解决Tailwind在VSCodium中的使用痛点，让你编写样式的效率提升300%。读完本文后，你将掌握：基础环境搭建、智能补全配置、自定义主题适配、性能优化四大核心技能。 ## 环境准备：从安装到验证 ### 核心插件安装 VSCodium对Tailwind的...
nuxt 使用tailwind 在vscode中无提示 解决方案
weixin_44179923的博客
08-05 2769
vscode 无提示 nuxt中使用tailwindcss
Tailwind CSS 学习笔记(二)
u011575498的博客
03-19 934
rem 表示 (小数、整数、负数)w-0.5表示/* 2px */;w-1表示/*4px*/;-mt-3表示/*-12px */;2、百分比表示（用分数表示）w-1/2表示width: 50%;w-1/3表示w-1/4表示width: 25%;3、指定具体数值mt-[10px]表示w-[100px]表示4、特定预定义类w-full表示min-w-full表示。
tailwindcss安装完插件代码不提示
m0_56274171的博客
10-11 2096
tailwindcss安装完插件代码不提示
vscode tailwind插件无提示
qq_33982898的博客
08-24 771
Tailwind CSS IntelliSense插件版本: v0.12.7问题: 无代码提示。
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
weixin_49256908的博客
04-24 1192
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
tailwindcss-intellisense：用于Visual Studio代码的智能Tailwind CSS工具
02-05
Tailwind CSS IntelliSense通过为Visual Studio Code用户提供高级功能（如自动完成，语法突出显示和修饰）来增强Tailwind开发体验。 安装 为了扩展到激活您必须和命名tailwind.config.js或tailwind.js在您的工作...
tailwindcss插件在vscode没有代码提示
04-30
在使用 Nuxt 和 TailwindCSS 开发项目时，如果发现 VSCode 缺少 TailwindCSS 的代码提示功能，可以通过以下方法解决问题。 #### 方法一：调整 VSCode 配置文件 `settings.json` 确保 VSCode 的配置允许快速建议...
vscode Taiwindcss提示不出来
qq_33565046的博客
05-16 696
vscode Taiwindcss提示不出来
VScode中vue遇到代码不提示
m0_73052350的博客
08-15 3575
vue代码提示
解决vscode tailwindcss在编辑class内容时，代码提示不触发，或者需要空格才能触发
Lemon的博客
08-28 1万+
解决vscode使用tailwindcss 代码不提示问题
webstorm tailwind 不智能提示的解决方法
hunt_er的博客
01-06 1万+
近期项目中采用了tailwind，但是由于开发习惯使用webstorm，使用tailwind是没有智能提示，看到别人使用vscode时有tailwind的智能提示，用起来非常爽，无奈，试用了一段vscode，智能提示确实很爽，但是还是习惯用webstorm，又转了回来。 终于，webstorm发布了2021.3版本，新添加了tailwind的支持。 重要提示： 想要在webstorm中获得比较好的tailwind支持，需要将webstorm升级到2021.3之后的版本，我现在使用的是2021.3.1版
UnoCSS 插件智能提示不生效解决
热门推荐
有来技术
02-25 1万+
解决 VSCode 安装 UnoCSS 插件之后，输入没有智能提示的问题。
关于vscode 当中unocss 插件突然没提示问题
qq_41304029的博客
07-30 1493
选择其他版本试试。
vscode插件unocss无法正常使用
性感码农在线写笔记
07-25 3202
unocss vscode 插件
在vscode中使用tailwindcss
08-01
在 VSCode 中配置和使用 Tailwind CSS 进行开发，需要完成以下几个关键步骤，确保 Tailwind CSS 正确集成到项目中，并且在开发过程中获得智能提示和样式支持。 ### 3.1 安装 Tailwind CSS 及其依赖 首先，在项目中安装 Tailwind CSS 和相关工具链。如果使用的是现代构建工具（如 Vite、Vue CLI、Create React App 等），推荐使用标准的 Tailwind CSS 安装方式： ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` 这将创建 `tailwind.config.js` 和 `postcss.config.js` 文件，用于配置 Tailwind CSS 的主题、插件和目标浏览器等设置。 ### 3.2 配置 Tailwind CSS 在 `tailwind.config.js` 中，确保内容扫描路径正确，以便 Tailwind 能识别项目中使用的类名： ```js module.exports = { content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], } ``` ### 3.3 创建全局 CSS 文件并引入 Tailwind 在 `src/assets` 或 `src` 目录下创建一个全局样式文件，例如 `tailwind.css`，并引入 Tailwind 的基础、组件和工具类： ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ### 3.4 在主入口文件中引入 Tailwind CSS 在 `main.js` 或 `main.ts` 中导入该 CSS 文件，确保样式全局生效： ```js import { createApp } from 'vue' import App from './App.vue' import './assets/tailwind.css' createApp(App).mount('#app') ``` ### 3.5 配置 VSCode 插件以获得智能提示 为了在 VSCode 中获得 Tailwind CSS 的类名自动补全和样式预览，建议安装官方推荐的插件： - **Tailwind CSS IntelliSense**（由 Tailwind 官方提供） 安装地址：[marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)[^2] 该插件会读取 `tailwind.config.js` 文件，提供类名建议、颜色预览、文档跳转等功能，极大提升开发效率。 安装完成后，VSCode 会在 HTML、Vue 或 JSX 文件中对 Tailwind 类名提供高亮和自动补全。 ### 3.6 检查构建流程是否支持 PostCSS 确保项目中使用的构建工具（如 Vite、Webpack、PostCSS CLI 等）支持 PostCSS 插件。在 `postcss.config.js` 中添加 Tailwind CSS 作为插件： ```js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` ### 3.7 开发与调试 启动开发服务器后，可以在组件中直接使用 Tailwind 类名，例如： ```vue <template> <div class="p-4 bg-blue-500 text-white rounded-lg"> Hello Tailwind CSS in VSCode! </div> </template> ``` VSCode 将根据配置提供类名提示和颜色预览。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值