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

更新时间：2025年04月07日 16:45:14 作者：满眼韶光.ʚɞ

这篇文章主要介绍了vue3中安装并且使用Tailwind CSS的完整步骤,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

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

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

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

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app

2. 安装依赖

安装 Tailwind CSS 及其相关依赖：

npm install -D tailwindcss postcss autoprefixer

3. 初始化配置文件

生成 tailwind.config.js 和 postcss.config.js：

npx tailwindcss init -p

4. 配置模板路径

修改 tailwind.config.js，确保 content 字段包含所有 Vue 文件路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 匹配所有 Vue/JS/TS 文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 创建并引入样式文件

在 src 目录下新建 style.css 文件，并添加 Tailwind 指令：

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.js 中引入样式文件：

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

6. 运行项目

启动开发服务器：

npm run dev

7. 验证安装

在 App.vue 中添加测试代码：

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

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

常见问题

样式未生效

检查 tailwind.config.js 中 content 路径是否正确
确保 style.css 已正确引入到 main.js

PostCSS 兼容性问题
确保 postcss.config.js 已自动生成，若项目中有自定义 PostCSS 配置，需手动合并。

到此这篇关于vue3中安装并且使用Tailwind CSS的文章就介绍到这了,更多相关vue3使用Tailwind CSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现鼠标移入移出事件代码实例
这篇文章主要介绍了vue实现鼠标移入移出事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue时间轴 vue-light-timeline的用法说明
这篇文章主要介绍了Vue时间轴 vue-light-timeline的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
webpack如何打包一个按需引入的vue组件库
在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,这篇文章主要给大家介绍了关于webpack如何打包一个按需引入的vue组件库的相关资料,需要的朋友可以参考下
2022-02-02
springboot+VUE实现登录注册
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue-router中scrollBehavior的巧妙用法
本文给大家介绍vue-router中scrollBehavior的妙用,文中给大家提到了两种解决方案，需要的朋友可以参考下
2018-07-07
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Element中el-select下拉框实现选中图标并回显图标
本文主要介绍了Element中el-select下拉框实现选中图标并回显图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
详解Vue组件之作用域插槽
这篇文章主要介绍了Vue组件之作用域插槽，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Vue 自定义ColorPicker及使用方法
这篇文章主要介绍了Vue 自定义ColorPicker及使用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
Vue出现首屏白屏的六种解决方法小结
这篇文章主要为大家详细介绍了Vue中出现首屏白屏的六种解决方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
2025-02-02