Vue3项目如何使用TailWindCSS保姆级教程

---

‌一、简单介绍一下TailWind CSS                TailWind CSS是一个实用工具优先的 CSS 框架，它通过提供大量的原子化 CSS 类，允许开发者通过组合这些类来快速构建界面，而无需编写额外的 CSS 文件。这种设计理念使得开发过程更加直观和高效，同时也提高了代码的可维护性和一致性‌。 

---

二、如何在Vue3项目中去引入并使用  1.打开TaildWindCSS官方网站 tailwindcss /

​

2.使用Vue脚手架创建一个vue3项目 npm create vue@latest

---

3.进入目录安装依赖并运行前端项目 cd <your-project-name> npm install npm run dev

---

4.安装Tailwind CSS到项目中去 npm install tailwindcss @tailwindcss/vite

---

5.在vite.config.js或vite.config.ts中引入@tailwindcss/vite插件，在以下代码中添加插件配置 import { defineConfig } from 'vite' export default defineConfig({ })

如下所示： 

import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], })

---

6.在main.js或者是main.ts中添加全局样式  @import "tailwindcss";

---

 三、现在就可以愉快地使用TailWind CSS了 求一键三连，是对我的支持，谢谢