高流量网站设计,在线广告设计与制作,青岛公司,电子商务网站建设与维护意味着什么Vue3项目中引入TailwindCSS#xff08;图文详细#xff09;
Tailwind CSS 是一个实用工具优先的 CSS 框架#xff0c;提供丰富的低级类#xff08;如 text-center、bg-blue-500#xff09;#xff0c;允许开发者通过组合这些类快速构建自定义设计#xff0c;而无需编写…Vue3项目中引入TailwindCSS图文详细
Tailwind CSS 是一个实用工具优先的 CSS 框架提供丰富的低级类如 text-center、bg-blue-500允许开发者通过组合这些类快速构建自定义设计而无需编写大量自定义 CSS。它高度可定制支持响应式设计、暗模式和插件扩展提升开发效率和代码可维护性。Tailwind 的模块化类名减少了样式冲突简化了团队协作并且可以通过配置文件轻松调整主题和样式。广泛应用于现代前端项目中特别适合需要灵活设计和快速迭代的开发场景。 文章目录 Vue3项目中引入TailwindCSS图文详细1.安装引入测试2.Tailwindcss插件代码提示与样式预览3.Tailwindcss顺序格式化工具安装 1.安装引入测试
首先确保已经使用vite创建了一个vue3可用的项目工程如果还没有请参考文章 Vite创建Vue3工程并引入ElementPlus图文详细
打开TailWindcss官网https://tailwind.nodejs.cn/docs/installation
进入安装里点击框架指南找到vite 进去后点击vue框架 打开项目工程终端根目录安装tailwindcss
npm install -D tailwindcss postcss autoprefixer初始化生成tailwindcss配置文件
npx tailwindcss init -p修改配置文件tailwind.config.js
/** type {import(tailwindcss).Config} */
export default {content: [./index.html,./src/**/*.{vue,js,ts,jsx,tsx},],theme: {extend: {},},plugins: [],
}修改根目录下生成的style.css文件如果没有生成此文件使用vite创建工程会附带
tailwind base;
tailwind components;
tailwind utilities;设置vscode忽略未知的规则消除警告 设置完毕后波浪线消失 App.vue文件加入测试代码
templateh1 classtext-3xl font-bold underlineHello world!/h1
/templatescript setup/scriptstyle langscss scoped/style启动运行项目工程
npm run dev打开对应的地址可在浏览器看到如下效果成功的话字体下方会有下划线 2.Tailwindcss插件代码提示与样式预览
在vscode搜索并安装插件 安装插件重启后当鼠标悬停在对应的Tailwindcss样式类上会显示对应的css样式 当输入相关的tailwindcss时会出现代码提示如果没出现相关提示则按alit/快捷键 3.Tailwindcss顺序格式化工具安装
在我们实际前端项目实际开发中引入原子化样式库后很容易出现样式顺序不统一问题尤其是在多人项目中这一点特别明显具体为同一个样式效果引入的原子化样式不一致导致代码可读性非常差造成不便于团队协作项目开发和代码可维护性低具体如下 以上代码样式显示效果完全相同但是由于个人引入原子化样式库习惯问题导致顺序不一致使得代码可读性变差 我们期望的结果为样式统一顺序 要想实现以上顺序统一的效果那么需要引入一个prettier-plugin-tailwindcss
项目根目录安装依赖
npm install -D prettier-plugin-tailwindcss.prettierrc文件引入插件
plugins: [prettier-plugin-tailwindcss]这样在使用prettier时使用对应的TailWindcss的样式将会统一进行排序实现我们想要的效果 注意如果保存时自动进行prettier格式化需要先对prettier进行配置参考以下文章 VScode中配置ESlintPrettier详细步骤图文详情
