东海网站建设网站常州建设
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详细步骤（图文详情）