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

---

‌一、简单介绍一下TailWind CSS

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

---

二、如何在Vue3项目中去引入并使用

1.打开TaildWindCSS官方网站https://tailwindcss.com/

​

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了

求一键三连，是对我的支持，谢谢