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的状态管理模式vuex
本篇文章主要介绍了深入理解vue的状态管理模式vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
从零写vue日历组件
最近做项目遇到一个需求，需要制作一个定制化的日历组件，本文主要介绍了从零写vue日历组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
解决ant-design-vue安装报错的问题
这篇文章主要介绍了解决ant-design-vue安装报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
如何利用vue+element ui实现好看的登录界面
最近做了个最基础的ElementUI登录页,适合新手查看,所以下面这篇文章主要给大家介绍了关于如何利用vue+element ui实现好看的登录界面的相关资料,需要的朋友可以参考下
2022-05-05
Element-UI日期选择器(选择日期范围)禁用未来日期实现代码
我们在网页开发时通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于Element-UI日期选择器(选择日期范围)禁用未来日期的相关资料,需要的朋友可以参考下
2024-02-02
Vue3内置组件Teleport使用方法详解
这篇文章主要介绍了Vue3内置组件Teleport使用方法，Teleport是Vue 3.0 新增的一个内置组件，主要是为了解决一些特殊场景下模态对话框组件、组件的渲染，带着些许的了解一起走进下面文章的详细内容吧
2021-10-10
vue实现表格增删改查效果的实例代码
本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Vue3中实现网页时钟功能(显示当前时间并每秒更新一次)
本文将详细介绍如何在Vue3中实现一个每秒钟自动更新的网页时钟,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-07-07
vue 单元测试的推荐插件和使用示例
单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码，使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现，并帮助其他开发者理解你的组件的作用。
2021-06-06
Vue中v-show添加表达式的问题(判断是否显示)
这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求，有数据来源和标签类型两行选项，需要实现点击上面的某个数据来源时，标签类型自动切换功能，感兴趣的朋友一起看看吧
2018-03-03