当今的前端开发离不开 CSS 框架，而 Tailwind CSS 正是这个领域中备受欢迎的框架之一。在使用 Tailwind 进行开发时，合理地利用一些有用的扩展程序可以大大提高效率和代码质量。本文分享了四个非常实用的 Tailwind 插件：Tailwind CSS IntelliSense、Tailwind Line Clamp、Tailwind Documentation 和 Tailwind Config Viewer。
vscode需要先安装Tailwind CSS IntelliSense插件 如果要在静态html中使用cdn调用的方式来加载tailwindcss,vscode是不会进行代码提示的,需要一个配置文件才能工作,所以需要在页面的根目录下新建一个文件: tailwind.config.js: exportdefault{ theme: { extend: {//}, }, }; 如果默认配置够用,那么哪怕配置项是空的也...
这样我们就能启动查看项目了;项目启动后,我们在写class类名时,肯定记不住那么多繁杂的类名,就需要用到编辑器插件了;打开VS Code的扩展面板,搜索Tailwind CSS IntelliSense: VSCode插件 这里可以看到很多扩展,选择第一个官方扩展进行安装,就可以增强Tailwind的开发体验;我们在写类名时,模糊写一个flex,就会带出flex相...
emmet 提示功能,如下图所示: 百度、google一阵子,发现是个全球性存在的问题,是 vue 插件 volar 导致的 vscode 自带的 emmet 提示功能不可用。 如果在vscode中不安装 vue 插件,那么想要在vue文件中启用 emmet 功能,需要在 user settings.json 中添加如下配置: "emmet.triggerExpansionOnTab":true,"emmet.showSuggest...
这个可以用 tailwind css 提供的 vscode 插件来解决: 安装这个 Tailwind CSS IntelliSense 之后的体验是这样的: 有智能提示,可以查看它对应的样式。 不需要记。 难以调试 在chrome devtools 里可以直接看到有啥样式,而且样式之间基本没有交叉,很容易调试: 相反,我倒是觉得之前那种写法容易多个 class 的样式相互覆盖,...
tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件,而不是在组件基础上实现个性化。 简短的概括: 发现问题:项目中css代码痛点 复制 .mock { margin: auto; font-size: 16px; // ... ...
在app.scss里加一行@tailwind utilities;就可以顺利使用tailwindcss了 但是我们需要我们的编辑器根据tailwindcss配置,自动生成 class 的智能提示怎么做呢? 这里我们以vscode为例: 安装WXML - Language Services 插件(一搜wxml下载量最多的就是了) 安装Tailwind CSS IntelliSense 插件 ...
接下来就能够看到，tailwindcss 愉快的运转了，安装 vscode 插件Tailwind CSS IntelliSense 后，所有的自定义的智能提示也出现了。点击查看更详细的文档和Demo 一些细节 此 preset 自动带了一套 rem2rpx 的机制,开发者可以通过:const { createPreset } = require('tailwindcss-miniprogram-preset')进行配置，如果您不...
Tailwind.css可以通过几种方式安装和配置,具体步骤如下: 通过npm安装: npm install tailwindcss 创建配置文件: 创建一个tailwind.config.js文件来配置Tailwind.css,例如设置主题色、字体等: module.exports = { theme: { extend: {}, }, variants: {}, plugins: [], } 创建样式文件: 在项目中创建一个CSS文...