如果要在静态html中使用cdn调用的方式来加载tailwindcss,vscode是不会进行代码提示的,需要一个配置文件才能工作,所以需要在页面的根目录下新建一个文件: tailwind.config.js: exportdefault{ theme: { extend: {//}, }, }; 如果默认配置够用,那么哪怕配置项是空的也能正常工作, 然后是配置index.html: import c...
按照官方文档的说法,那个配置文件里是需要手动加点东西的 // /tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } 参考资料:https://tailwindcss.c...
如果在vscode中不安装 vue 插件,那么想要在vue文件中启用 emmet 功能,需要在 user settings.json 中添加如下配置: "emmet.triggerExpansionOnTab":true,"emmet.showSuggestionsAsSnippets":true,"emmet.showExpandedAbbreviation":"always","emmet.includeLanguages":{"vue-html":"html","vue":"html",}, 可以参考:...
"css.customData": [".vscode/tailwindcss.json"] 1. 创建.vscode/tailwindcss.json { "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", ...
Tailwind 团队刚刚发布了针对 VSCode 的 Tailwind CSS 的智能提示插件的新版本,该插件为您的标记和 CSS 添加了特定于 Tailwind 的提示。 根据发布公告,以下是此版本的两个主要功能: 消除CSS 错误提示 Tailwind 已经可以检测到 CSS 错误,例如,当您在 @screen 指令中键入屏幕名称时。 Tailwind CSS IntelliSense 的整...
使用nextjjs 集成tailwind之后,在global.css 添加tailwind 组件vscode提示警告。 Unknown at rule @tailwindcss(unknownAtRules) 截图如下: 解决 原因是css 不知道这条规则提示,如果没有提示警告。 可以屏蔽这条vscode 规则: 在根目录新建.vscode文件夹 文件夹下新建settings.json 文件 ...
再配合上 vscode 插件Tailwind CSS IntelliSense使用,可以直接自动生成智能提示,开发体验很好。 另外也写了一份uni-app+vue3+tailwindcss的模板,有需要可以使用uni-app-vue3-tailwind-vscode-template 也写了一个在原生小程序中,使用scss+postcss+tailwindcss的例子。接下来下一篇文章,我们就简单谈谈,如何抛弃微信开发...
这里我们以vscode为例: 安装WXML - Language Services 插件(一搜wxml下载量最多的就是了) 安装Tailwind CSS IntelliSense 插件 接着找到Tailwind CSS IntelliSense的扩展设置 在include languages,手动标记wxml的类型为html 如图所示 智能提示就出来了: 智能提示 ...
一句话总结，一个借助了vscode代码提示插件实现了快速写样式的原子类库 有没有问题呢？说实话，现在已经...