将Tailwind CSS，融入Vue+ElementPlus方案，制作专业级AI应用首页

雪碧聊技术2026-03-16 10:00

目录

一.安装和配置TailwindCSS

1.安装依赖

2.配置tailwind.config.js文件

3.配置postcss.config.js文件

4.创建并配置src/assets/style.css文件

二.页面代码实现

注意：此时是在script标签中，引入的上面那个css文件

[三.代码中的Tailwind CSS相关知识解读](#三.代码中的Tailwind CSS相关知识解读)

[🎨 布局与定位](#🎨 布局与定位)

[🎨 视觉样式与美化](#🎨 视觉样式与美化)

[✨ 交互与动效](#✨ 交互与动效)

[📱 响应式设计](#📱 响应式设计)

[💡 代码中几个特别的 Tailwind 写法](#💡 代码中几个特别的 Tailwind 写法)

[📏 布局与盒模型 (Layout & Box Model)](#📏 布局与盒模型 (Layout & Box Model))

[🧭 定位与层级 (Positioning & Stacking)](#🧭 定位与层级 (Positioning & Stacking))

[🎨 颜色与背景 (Colors & Background)](#🎨 颜色与背景 (Colors & Background))

[🎨 视觉效果 (Visual Effects)](#🎨 视觉效果 (Visual Effects))

[🤖 Flex 布局 (Flexbox)](#🤖 Flex 布局 (Flexbox))

[🖱️ 交互与状态 (Interaction)](#🖱️ 交互与状态 (Interaction))

[📱 响应式设计 (Responsive)](#📱 响应式设计 (Responsive))

[🖼️ 其他实用类](#🖼️ 其他实用类)

四.效果展示

声明：

本篇文章所需的前置知识：VUE、ElementPlus

一.安装和配置TailwindCSS

1.安装依赖

在vue项目的控制台，依次输入以下两个命令

bash 复制代码 
npm install -D tailwindcss postcss autoprefixer
bash 复制代码 
​​​​​​​npx tailwindcss init -p

解读：

①第一行：npm install -D tailwindcss postcss autoprefixer

这条命令使用 npm 安装三个开发依赖包：

  • -D 或 --save-dev：表示将这些包安装为开发依赖 （devDependencies），只在开发时使用，生产构建时不需要（生产时，你写的 Tailwind 样式会完全保留，只是它的"工具包"不需要在服务器上继续工作了。）

  • tailwindcss：Tailwind CSS 框架本身，提供所有的工具类（utilities）

  • postcss：一个处理 CSS 的工具（CSS 处理器），Tailwind 需要它来转换 CSS

  • autoprefixer ：自动添加 CSS 浏览器前缀的 PostCSS 插件（如 -webkit-、-moz-），确保样式在不同浏览器中都能正常工作

②第二行：npx tailwindcss init -p

这条命令初始化 Tailwind CSS 的配置文件：

  • npx：执行项目中安装的包，而不是全局安装的

  • tailwindcss init ：创建 Tailwind CSS 的配置文件 tailwind.config.js

  • -p 或 --postcss：同时创建一个 PostCSS 配置文件 postcss.config.js

执行后生成的两个文件：

文件1：tailwind.config.js - Tailwind 的主配置文件

javascript 复制代码 
/** @type {import('tailwindcss').Config} */  // 这行是类型注释，帮助编辑器提供自动补全
module.exports = {
  content: [],  // 重要！需要配置要扫描的文件路径，例如：['./src/**/*.{html,js}']
  theme: {
    extend: {},  // 在这里扩展自定义主题配置（颜色、字体、间距等）
  },
  plugins: [],  // 在这里添加 Tailwind 插件
}

文件2：postcss.config.js - PostCSS 配置文件

javascript 复制代码 
module.exports = {
  plugins: {
    tailwindcss: {},  // 使用 Tailwind CSS 插件，处理 @tailwind 指令
    autoprefixer: {}, // 使用 Autoprefixer 插件，自动添加浏览器前缀
  },
}

2.配置tailwind.config.js文件

javascript 复制代码 
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 重要：告诉 Tailwind 扫描哪些文件
  content: [
    "./public/index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      
    },
  },
  plugins: [],
}

3.配置postcss.config.js文件

javascript 复制代码 
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4.创建并配置src/assets/style.css文件

css 复制代码 
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    margin: 0;
    /* background-color: #000; */
}

二.页面代码实现

html 复制代码 
<template>
  <div class="relative h-screen w-full overflow-hidden bg-black">
    <!-- 视频背景层 -->
    <video
      autoplay
      muted
      loop
      playsinline
      class="absolute inset-0 w-full h-full object-cover z-0"
    >
      <!-- 替换为你的视频路径 -->
      <source src="../assets/robot_romantic.mp4" type="video/mp4" />
      您的浏览器不支持 video 标签。
    </video>
    <!-- 可选：半透明遮罩，增强文字可读性（可根据需要调整透明度） -->
    <div class="absolute inset-0 bg-black/40 z-5"></div>

    <!-- logo -->
    <img 
    src="../assets/W.png" 
    class="absolute top-2 left-2 w-20 h-24 z-2" 
    alt="LOGO">

    <!-- 主视觉区域 -->
    <div class="relative mt-10 flex h-full items-center justify-center">
      <!-- AI头像与光效 -->
      <div class="relative w-full max-w-4xl text-center px-4">
        <!-- 模拟AI头像、光环动画 -->
        <!-- <div class="relative w-32 h-32 mx-auto">
          <img
            src="../assets/casually.jpg"
            alt="AI Avatar"
            class="w-full h-full rounded-full object-cover opacity-80 hover:opacity-100 transition-opacity duration-300"
          />
          <div class="absolute inset-0 rounded-full border-4 border-gray-500/30 animate-pulse"></div>
        </div> -->

        <!-- 标题 -->
        <h1 class="mt-10 text-4xl md:text-4xl font-normal text-white">
          有什么新的故事灵感？
        </h1>

        <!-- 输入框 -->
        <div class="mt-6 max-w-md mx-auto relative">
          <input
            v-model="prompt"
            @keyup.enter="generate"
            placeholder="输入你的灵感，AI 会为你自动策划内容生成视频"
            class="w-full px-6 py-3 pr-12 rounded-full bg-white/10 backdrop-blur-lg text-white border border-white/20 focus:border-white/50 focus:ring-2 focus:ring-white/30 focus:outline-none transition-all duration-300 placeholder:text-white/50"
          />
          <!-- <div class="absolute inset-y-0 right-2 flex items-center pr-3 pointer-events-none">
            <el-icon><Top /></el-icon>
          </div> -->
          <!-- 修改部分：给 div 加上圆形和背景样式 -->
          <div class="absolute inset-y-0 right-2 top-2 flex items-center justify-center w-8 h-8 rounded-full bg-white/20 pointer-events-none">
            <el-icon class="text-white">
              <Top />
            </el-icon>
          </div>
        </div>

        <!-- 按钮 -->
        <!-- <button
          @click="generate"
          class="mt-4 px-8 py-3 rounded-full bg-pink-600 text-white font-medium hover:bg-pink-500 transition-colors duration-300 shadow-lg hover:shadow-pink-500/30"
        >
          生成视频
        </button> -->
      </div>
    </div>

    <!-- 侧边栏（左侧） -->
    <div class="absolute top-64 left-0 p-4">
      <!-- 父容器：负责整体的胶囊背景和圆角 -->
      <div class="flex flex-col items-center bg-white/10 backdrop-blur-lg rounded-full px-2 py-1 space-y-1">
        
        <!-- 按钮列表 -->
        <button
          v-for="(icon, index) in sidebarIcons"
          :key="index"
          class="w-full p-2 rounded-lg text-white hover:bg-white/20 transition-colors rounded-full"
          :title="icon.title"

        >
          <component :is="icon.component" class="w-6 h-6"  />
        </button>
        
      </div>
    </div>

    <!-- 底部功能区 -->
    <div class="absolute bottom-0 left-0 p-4 flex justify-between w-full ">
      <!-- <div class="flex space-x-4">
        <button class="text-white hover:text-pink-400 transition-colors">灵感广场</button>
        <button class="text-white hover:text-pink-400 transition-colors">我的作品</button>
      </div> -->
      <div class="flex space-x-4">
        <button class="text-gray-400 hover:text-white transition-colors">灵感广场</button>
        <button class="text-gray-400 hover:text-white transition-colors">我的作品</button>
      </div>
      <button
        class="flex items-center space-x-2 px-4 py-2 rounded-full 
              bg-white bg-opacity-10 backdrop-blur-md 
              border border-white border-opacity-20 
              hover:bg-opacity-20 
              transition-all duration-300 ease-in-out 
              shadow-lg"
        @click="publish"
      >
        <!-- 使用 Heroicons 的 PlusIcon -->
        <PlusIcon class="w-5 h-5 text-white" />
        <span class="text-white text-sm font-medium">发布作品</span>
      </button>
    </div>

    <!-- 提示信息 -->
    <div class="absolute top-8 right-4 text-white text-sm space-x-2">
      <span class="px-6 py-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors">
        <!-- 使用图标代替加号 -->
        <CurrencyDollarIcon class="absolute mx-4 w-5 h-5 text-white" />
        <span class="ml-3">72</span>
      </span>
      <span class="py-2 px-3 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors">开通会员</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { HomeIcon, FolderIcon, UserIcon, BellIcon, PlusIcon, CurrencyDollarIcon } from '@heroicons/vue/24/outline';
/* 导入element-plus图标 */
import { Top } from '@element-plus/icons-vue'
//导入"关于作者"页面所需样式
import '@/assets/style.css';
const prompt = ref('');

const sidebarIcons = [
  { component: HomeIcon, title: '首页' },
  { component: FolderIcon, title: '项目' },
  { component: UserIcon, title: '个人中心' },
  { component: BellIcon, title: '通知' },
];

const generate = () => {
  if (prompt.value.trim()) {
    alert(`AI 正在为你生成：${prompt.value}`);
    // 这里可以调用你的 AI 生成接口
  }
};

const publish = () => {
  alert('发布功能暂未开放');
};
</script>

<style scoped>
/* 自定义动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pulse {
  animation: pulse 3s infinite ease-in-out;
}
</style>

注意：此时是在script标签中，引入的上面那个css文件

javascript 复制代码 
//导入页面所需的tailwind css样式
import '@/assets/style.css';

vue的rooter路由（页面跳转）我们已经配置好了，由于此处和Tailwind CSS关系不大，所以我们就不详细讲解了。

三.代码中的Tailwind CSS相关知识解读

这段代码是一个典型的 Vue 3 单文件组件（SFC），它大量使用了 Tailwind CSS 来实现现代化的样式设计。Tailwind CSS 是一种"实用优先"（Utility-First）的 CSS 框架，它不提供预设的组件（如 Bootstrap），而是提供大量的原子类（Atomic Classes），让你通过组合这些类来构建自定义设计。

结合代码和 Tailwind CSS 的特性，我为你整理了以下核心知识点：

🎨 布局与定位

  • 尺寸与盒模型 ：
    • h-screen, w-full: 使用视口单位，分别代表 100vh 高度和 100vw 宽度。
    • max-w-4xl: 设置最大宽度，用于限制内容宽度，防止在大屏幕上过宽。
    • inset-0: 在绝对定位元素中，等同于 top: 0; left: 0; bottom: 0; right: 0;，常用于覆盖全屏或作为遮罩。
  • Flex 布局 ：
    • flex, items-center, justify-center: 构建了经典的 Flex 居中布局。items-center 控制交叉轴（垂直）居中，justify-center 控制主轴（水平）居中。
    • flex-col, space-y-1, space-x-4: flex-col 将主轴变为垂直方向；space-y-1 和 space-x-4 是 Tailwind 的间距神器，用于在子元素之间创建垂直或水平间距，无需给子元素单独写 margin。
  • 定位系统 ：
    • relative, absolute: 用于层叠布局。代码中视频背景、遮罩层、Logo、侧边栏和底部栏都使用了绝对定位，脱离文档流，实现叠加效果。

🎨 视觉样式与美化

  • 背景与透明度 ：
    • bg-black, bg-white/10: 设置背景颜色。/10 是 Tailwind CSS 3.0+ 的新语法，直接设置颜色的透明度（10% 不透明度）。
    • backdrop-blur-lg: 实现毛玻璃（背景模糊）效果，常用于导航栏或卡片悬浮层。
  • 边框与圆角 ：
    • rounded-full: 将元素变成圆形（完全圆角）。
    • border, border-white/20: 设置边框样式和颜色。
  • 阴影 ：
    • shadow-lg, shadow-pink-500/30: 添加阴影效果，提升元素的立体感。

✨ 交互与动效

  • 变换与过渡 ：
    • hover:opacity-100, hover:bg-white/20: 定义鼠标悬停时的状态。Tailwind 支持多种状态变体（如 hover:、focus:、lg:）。
    • transition-all duration-300 ease-in-out: 实现平滑的过渡动画，让颜色、大小变化不那么生硬。
  • 自定义动画 ：
    • animate-pulse: 代码中虽然引入了自定义的 @keyframes pulse，但在 Tailwind 中，animate-pulse 通常是默认提供的，用于模拟加载时的呼吸灯效果（缩放和透明度变化）。

📱 响应式设计

  • 断点前缀 ：
    • md:text-4xl, lg:flex: Tailwind 使用移动优先的策略。md: 表示在中等屏幕及以上生效，lg: 表示在大屏幕及以上生效。例如，侧边栏按钮在小屏幕上可能是一列，在大屏幕上会变成横排。

💡 代码中几个特别的 Tailwind 写法

  • 任意值（Arbitrary Values） ：
    • 代码中使用了类似 w-[200px] 或 bg-[#e6e6e6] 的写法（虽然在提供的代码片段中未直接出现，但属于常见用法），或者像 top-64（16rem）这样的固定值。Tailwind 支持在类名中直接写入自定义值，非常灵活。
  • 层叠与优先级 ：
    • z-0, z-5, z-10: 控制元素的堆叠顺序（z-index）。
    • -m-1.5, -mt-4: 负值间距，用于微调位置或抵消默认间距。

📏 布局与盒模型 (Layout & Box Model)

类名 含义解析 作用说明
h-screen height: 100vh 设置元素高度为视口的 100%
w-full width: 100% 设置元素宽度为父容器的 100%
max-w-md / max-w-4xl max-width 设置最大宽度 。md 约为 28rem，4xl 约为 80rem。防止元素在大屏幕上过宽。
mx-auto margin-left & margin-right: auto 实现水平居中
mt-6 / mt-10 / mt-4 margin-top 设置上边距。6 = 1.5rem (24px)，10 = 2.5rem (40px)
mb-4 margin-bottom 设置下边距 (代码中注释部分有提及)
p-4 / px-2 / py-1 padding p-4 是四周内边距；px-2 是左右内边距；py-1 是上下内边距。
space-y-1 / space-x-4 gap 设置子元素之间的间距。space-y-1 是垂直间距，space-x-4 是水平间距。
overflow-hidden overflow: hidden 隐藏溢出的内容（常用于裁剪视频或图片）
inset-0 top, right, bottom, left: 0 绝对定位时，让元素填充父容器（等同于 top:0; left:0; ...）

🧭 定位与层级 (Positioning & Stacking)

类名 含义解析 作用说明
relative position: relative 相对定位，通常作为绝对定位子元素的参考容器
absolute position: absolute 绝对定位，脱离文档流，相对于最近的定位祖先元素
z-0 / z-5 / z-10 z-index 控制元素的堆叠顺序（层级）。数字越大，层级越高

🎨 颜色与背景 (Colors & Background)

类名 含义解析 作用说明
bg-black background-color: black 设置背景色为黑色
bg-white/10 background-color: rgba(255,255,255,0.1) 设置背景色为白色，/10 表示 10% 的透明度
text-white color: white 设置文字颜色为白色
text-gray-400 color: theme('colors.gray.400') 设置文字颜色为灰色调色板中的 400 号色
border border-width: 1px 添加边框
border-white/20 border-color: rgba(255,255,255,0.2) 设置边框颜色为白色，20% 透明度

🎨 视觉效果 (Visual Effects)

类名 含义解析 作用说明
rounded-full border-radius: 9999px 设置完全圆角，通常用于圆形或胶囊形状
rounded-lg border-radius: 0.5rem 设置较大的圆角
shadow-lg box-shadow: large 添加较大的阴影
shadow-pink-500/30 box-shadow: color + opacity 设置阴影颜色为粉红色 500 号色，30% 透明度
backdrop-blur-lg backdrop-filter: blur() 背景模糊效果（毛玻璃），常用于导航栏或模态框

🤖 Flex 布局 (Flexbox)

类名 含义解析 作用说明
flex display: flex 开启弹性布局
flex-col flex-direction: column 设置主轴方向为垂直
items-center align-items: center 交叉轴居中对齐
justify-center justify-content: center 主轴居中对齐
justify-between justify-content: space-between 两端对齐，项目之间间隔相等

🖱️ 交互与状态 (Interaction)

类名 含义解析 作用说明
hover:bg-white/20 &:hover { background-color: ... } 鼠标悬停时的背景色
hover:text-white &:hover { color: ... } 鼠标悬停时的文字颜色
focus:border-white/50 &:focus { border-color: ... } 元素获得焦点（如输入框被点击）时的边框色
focus:ring-2 &:focus { ring-width: 2px } 聚焦时的光晕宽度
focus:outline-none &:focus { outline: none } 移除默认的聚焦轮廓线
transition-all transition: all 开启所有属性的过渡动画
duration-300 transition-duration: 300ms 动画持续时间为 300 毫秒
ease-in-out transition-timing-function 动画速度曲线（先慢后快再慢）

📱 响应式设计 (Responsive)

类名 含义解析 作用说明
md:text-4xl @media (min-width: 768px) { ... } 在中等屏幕（768px）及以上，文字大小为 4xl

🖼️ 其他实用类

类名 含义解析 作用说明
object-cover object-fit: cover 图片或视频填充容器并保持比例，裁剪溢出部分（常用于背景视频）
font-normal font-weight: 400 字体粗细为正常
text-4xl font-size: 2.25rem 设置文字大小
text-center text-align: center 文字居中对齐
w-20 / h-24 / w-6 / h-6 width / height 设置具体的宽高。20 = 5rem (80px)，24 = 6rem (96px)，6 = 1.5rem (24px)
pointer-events-none pointer-events: none 元素不响应鼠标事件（常用于图标，让点击穿透到父元素）
opacity-80 opacity: 0.8 设置元素透明度为 80%

总结来说，这段代码利用 Tailwind 的原子类，将样式逻辑直接内聚在 HTML 结构中，使得开发时无需频繁切换文件写 CSS，且样式意图一目了然。

四.效果展示

以上就是本篇文章的全部内容，喜欢的话可以留个免费的关注呦~~~

相关推荐
yangyanping201083 小时前
Vue入门到精通八之data 函数
javascript·vue.js·ecmascript
wuhen_n3 小时前
v-once和v-memo完全指南：告别不必要的渲染，让应用飞起来
前端·javascript·vue.js
干前端3 小时前
Vue3 组件库实战(六)：从本地到 NPM，Vue 组件库工程化构建与打包全指南（上）
前端·vue.js·npm
optimistic_chen3 小时前
【Vue入门】组件及组件化
前端·javascript·vue.js·html·组件
SuperEugene4 小时前
前端基础实战：JS/TS与Vue体系化扫盲（47 篇完整目录 + 避坑）
javascript·vue.js·前端框架·npm·ecmascript·状态模式
我命由我1234512 小时前
Element Plus - Form 的 resetField 方法观察记录
开发语言·前端·javascript·vue.js·html·html5·js
清空mega13 小时前
《Vue3 项目结构详解：components、views、assets、router、stores 到底该怎么理解？》
前端·javascript·vue.js
雨雨雨雨雨别下啦14 小时前
Vue——小白也能学！Day6
前端·javascript·vue.js
网络点点滴16 小时前
透传属性$attrs
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03OpenClaw 使用和管理 MCP 完全指南04OpenClaw macOS 完整安装与本地模型配置教程（实战版）05本地部署 OpenClaw + DeepSeek-R1 完全指南06UV安装并设置国内源07Openclow安装保姆级教程08OpenClaw 飞书机器人不回复消息？3 小时踩坑总结09OpenClaw Control UI安全上下文访问配置10在 Windows 上配置 Claude Code从安装到解决网络问题