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文件加入测试代码
<template>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>
<script setup></script>
<style lang="scss" 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中配置ESlint+Prettier详细步骤(图文详情)