解决vscode tailwindcss在编辑class内容时，代码提示不触发，或者需要空格才能触发

最新推荐文章于 2024-09-18 22:09:31 发布
最新推荐文章于 2024-09-18 22:09:31 发布
阅读量7.3k 收藏 16
点赞数 35
分类专栏： vscode 文章标签： vscode ide 编辑器 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44832068/article/details/126575775
版权

解决vscode tailwindcss在编辑class内容时，代码提示不触发，或者需要空格才能触发

官方解决方案

链接：https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
解决方案

"editor.quickSuggestions": {
  "strings": true
}

教程

  1. 打开右下角设置
    在这里插入图片描述
  2. 搜索 editor.quickSuggestions
    在这里插入图片描述
  3. 在 strings 把 off 改为 on
    在这里插入图片描述

完成

在这里插入图片描述

如果觉得有帮助的话，请点个赞，Thanks♪(･ω･)ﾉ

windicss-intellisense：用于VS Code的智能WindiCSS工具
03-04
Windi CSS智能感知 Windi CSS IntelliSense通过为Visual Studio Code用户提供自动完成，语法突出显示，代码折叠和构建等高级功能，增强了Windi开发体验。 安装 该插件打包了windicss编译器，因此您无需安装windicss即可使用它，并且还支持配置文件(tailwind|windi).config.(js|cjs|ts) 。 特征 自动完成 有关实用程序和变体的智能建议。 悬停预览 将鼠标悬停在完整CSS上以获取类名称。 语法高亮 突出显示实用程序，变体和重要内容。 色彩预览 预览颜色和光谱。 代码折叠 折叠过长的类以提高可读性。 编译命令 内置命令，一键操作。 扩展设置 设定值 类型 默认 描述 windicss.enableColorDecorators 布尔值 真的 启用颜色装饰器。 windicss.enableHoverPr
vscode 插件 Tailwind CSS IntelliSense 解决 class 提示问题
舜岳的博客
01-31 1829
就是通过 Tailwind CSS IntelliSense 插件配置。正则匹配到了就显示提示。
解决在vscode上使用IntelliSense for CSS class names in HTML，无法出现代码提示的问题
最新发布
希望我的分享，能帮助到你
09-18 433
最近在学习bootstrap前端框架的使用，然后，我就在vscode上找到了一个bootstrap的代码提示插件，叫作IntelliSense for CSS class names in HTML。没想到，安装完插件，重启vscode之后，并没有出现预期中的代码提示。我核对了一下bootstrap中的css文件和js文件的引用路径，并没有任何问题。
TailWind CSS Intellisense 插件在 VSCode 上不起作用
qq_38679197的博客
10-13 1981
一开始我安装了TailWind以后在我的Macbook Air上一电提示没有，我换到我的台式电脑上就一直有提示。我把笔记本的插件全部禁用掉还是无法解决不能提示的问题，后来发现安装了。但其实在你的settings.json里面去添加这个配置更为有效。这个插件以后能解决这个问题。
tailwindcss配之后不生效
weixin_50572526的博客
01-24 3444
以上配置完成 为了方便使用在vscode里面添加一个插件，这样每次能提醒相关class类名。重点我出现了bug，配置完成没问题之后，相关的class不生效。看到了没引入的 css样式没解析，为了让他解析成功。vite.config.js里面加上。然后问题就解决拉拉~~~~~~
Vue3配置tailwindcss并在vscode中智能提示
05-24 3324
在已有项目总安装依赖：并创建配置文件。
vscode前端项目使用Tailwind CSS开发必备技能，5分钟快速上手
04-13 3143
Tailwind CSS IntelliSense 是一款功能强大的工具，可以帮助开发者更快、更高效地编写代码。该工具可以实时提供 Tailwind CSS 类的建议，减少错误，提高代码质量。通过使用 IntelliSense，开发者可以提高生产力，减少学习曲线，并提高应用程序的可访问性。如果你是一名使用 Tailwind CSS 的开发者，请务必充分利用这一强大的功能。
用 vscode 写 react 组件时，tailwind 怎么显示 css 提示？
湖北太米网络科技有限公司
08-31 819
要在 Visual Studio Code (VSCode) 中编写 React 组件并使用 Tailwind CSS 显示 CSS 提示，你需要按照以下步骤操作： 安装 Tailwind CSS 和它的 VSCode 插件。 在项目中安装 tailwindcss/postcss7 和 autoprefixer。 配置 VSCode 以使用 Tailwind CSS 插件。 创建一个新的 Re...
在vscode里使用.vue代码模板的方法
08-27
在Visual Studio Code (VSCode) 中使用`.vue`代码模板是一种提高开发效率的方式，特别是对于Vue.js项目。Vue.js是一个流行的前端框架，它的组件化结构使得`.vue`文件成为核心。下面将详细介绍如何在VSCode中设置和...
禁止空格提交表单的js代码
10-26
然而，值得注意的是，虽然这种方法可以防止回车键触发表单提交，但它并不阻止用户通过点击提交按钮或者使用其他方式（如JavaScript代码）来提交表单。因此，如果你需要在整个页面或应用中统一处理表单提交，可能还...
去除字符串左右两边的空格(实现代码)
09-02
在进行Web开发时，去除字符串左右两边的空格是一个常见需求。尤其是在处理表单数据时，用户可能会不小心输入多余的空格，尤其是在用户名、邮箱等需要精确输入的字段。为了解决这个问题，可以使用正则表达式来匹配并...
CSS实现超级链接需要通过双击后跳转
09-25
这个功能在某些交互设计中可能会用到，比如增强用户体验或者创建特殊的交互效果。接下来，我们将详细介绍如何使用CSS实现超级链接需要通过双击后跳转。 首先，我们需要理解CSS中的`:hover`、`:active`和`:focus`伪...
java以单词的维度反转字符串（中间的空格不确定，并不可以缺少）
12-20
最后，我们需要特别处理最后一个单词或空格序列，因为它们在遍历过程中不会触发添加到列表的操作。完成遍历后，我们可以通过反转这个列表来得到最终的反转字符串。为了保证空格的正确保留，我们不能使用Java 8及以上...
vue3使用tailwindcss，解决无提示问题
weixin_45943355的博客
12-23 3922
创建vue3+vite+ts+pinia+router项目
nuxt 使用tailwind 在vscode中无提示 解决方案
weixin_44179923的博客
08-05 2264
vscode 无提示 nuxt中使用tailwindcss
让你开发更舒适的 Tailwind 技巧
粉丝们务必加入微信粉丝群
11-28 2720
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。虽然 Tailwind 已经非常优秀，但我还是发现了一些技巧，可以进一步提升使用这个框架的体验。IDE 设置智能提示扩展Tailwind 智能提示是一款适用于 VSCode 和 JetBrains（如 ID...
tailwindcss安装完插件代码不提示
m0_56274171的博客
10-11 559
tailwindcss安装完插件代码不提示
tailwindcss 不生效问题记录
t1234tgb的博客
08-22 1496
试试查看tailwind.config.js文件是否有设置：important: "#app"，屏蔽这行即可。
vscode配置class代码提示
05-27
要在 VS Code 中配置 Class 代码提示，需要安装以下两个扩展： 1. ESLint：提供了 JavaScript 代码检查和格式化功能。 2. Prettier：提供了代码格式化功能。 安装完扩展后，在 VS Code 的设置中搜索 "eslint"，然后将 "eslint.autoFixOnSave" 和 "eslint.validate" 设置为 true，这样当你保存 JavaScript 文件时，就会自动进行代码格式化和检查。 此外，你还可以按下 Ctrl + 空格键，手动触发代码提示。如果你的项目中使用了 TypeScript，可以安装相应的扩展，如 TypeScript TSLint Plugin。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值