vue3中安装并且使用Tailwind CSS的完整步骤

阿洛呐

Vue 3 项目安装 Tailwind CSS 完整步骤（基于 Vite）

官方文档参考（英文） | 中文镜像

1. 创建 Vue 3 项目（可选）

若尚未创建项目，可先初始化一个 Vite 项目：

1. npm create vite@latest my-vue-app -- --template vue
   
2. cd my-vue-app

复制代码

2. 安装依赖

安装 Tailwind CSS 及其相关依赖：

1. npm install -D tailwindcss postcss autoprefixer

复制代码

3. 初始化配置文件

生成

1. tailwind.config.js

复制代码

和

1. postcss.config.js

复制代码

：

1. npx tailwindcss init -p

复制代码

4. 配置模板路径

修改

1. tailwind.config.js

复制代码

，确保

1. content

复制代码

字段包含所有 Vue 文件路径：

1. /** @type {import('tailwindcss').Config} */
   
2. export default {
   
3.   content: [
   
4.     "./index.html",
   
5.     "./src/**/*.{vue,js,ts,jsx,tsx}", // 匹配所有 Vue/JS/TS 文件
   
6.   ],
   
7.   theme: {
   
8.     extend: {},
   
9.   },
   
10.   plugins: [],
    
11. }

复制代码

5. 创建并引入样式文件

在

1. src

复制代码

目录下新建

1. style.css

复制代码

文件，并添加 Tailwind 指令：

1. /* src/style.css */
   
2. @tailwind base;
   
3. @tailwind components;
   
4. @tailwind utilities;

复制代码

在

1. main.js

复制代码

中引入样式文件：

1. import './style.css' // 使用相对路径，避免别名配置问题

复制代码

6. 运行项目

启动开发服务器：

1. npm run dev

复制代码

7. 验证安装

在

1. App.vue

复制代码

中添加测试代码：

1. <template>
   
2.   <h1 class="text-3xl font-bold underline text-blue-500">
   
3.     Hello Tailwind CSS!
   
4.   </h1>
   
5. </template>

复制代码

预期效果：显示蓝色、加粗、带下划线的超大文本。

常见问题

样式未生效

• 检查
  1. tailwind.config.js

  复制代码
  中
  1. content

  复制代码
  路径是否正确
  
• 确保
  1. style.css

  复制代码
  已正确引入到
  1. main.js

  复制代码

PostCSS 兼容性问题
确保

1. postcss.config.js

复制代码

已自动生成，若项目中有自定义 PostCSS 配置，需手动合并。
到此这篇关于vue3中安装并且使用Tailwind CSS的文章就介绍到这了,更多相关vue3使用Tailwind CSS内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！