如何在Vue3项目中安装使用Tailwind CSS 以及通过Tailwind CSS插件实现卡片的3D翻转效果？

Tailwind CSS简单介绍

对于 Tailwind CSS 想必大家都有所耳闻，是一种快速 UI 开发的实用工具集 原子化 CSS 框架，而对于 如何组织CSS规则，可分为两个派别 [语义化CSS] 与 [原子化CSS]，[语义化CSS] 比较好理解，例如：从这几段CSS源码就可以大概知晓需求是想当鼠标停留在文字上时实现一个基础的提示框内容以及定位的方式等【此段CSS源码来源于 菜鸟教程】.

/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

而所谓 [原子化CSS] 我的理解就是将开发中所需的CSS样式封装为一套完整的最小单位的实用工具类，代表这一个已经定义好的CSS 规则。

使用Tailwind CSS时，一般只需在class属性中书写官网提供好的工具类即可实现所需的 UI界面，当然可能会由于特殊的样式需要安装一些插件，比如下面本文将要实现卡片的3D翻转效果，就需要下载插件方可食用。相较于传统编写CSS样式：无需考虑类名起名问题，不用在外部css文件反复跳转查看多个CSS文件，减少编写对于复杂样式的困难量。当然也存在一些缺点，需要记忆一些类名并且在HTML中编写很长的类名，不利于管理，增加在对于公司内部的UI设计过程中从语义化CSS到原子化CSS的转变，而且可能都需要对设计系统都要懂。这也是很多程序员对Tailwind CSS产生分歧的一方面原因。另外，国外对于此原子化CSS的接受程度却在逐年提升。

安装 Tailwind CSS

由于本人对此感触稍有深刻，就浪费了一些言舌，下面开始立即安装Tailwind CSS：
首先在Vue3中使用Tailwind CSS就需要常规的npm命令，在此大家对于Vue3的安装都已经轻车熟路，那直接上终端命令：

安装Vue3命令：

npm create vue@latest

1. 安装Tailwind CSS命令：

   npm install -D tailwindcss postcss autoprefixer

2. 使用 Tailwind CLI 来为项目生成 Tailwind 配置文件 与 postcss 配置文件
   注意，在此处如需要生成其他配置文件，例如：TypeScript 配置文件 则使用 “ --ts”，具体其他配置文件请参考官网 “配置”。

   npx tailwindcss init -p

3. 当生成并出现 后，需要在导出的对象中content[]数组配置添加所需模版文件的路径，即为将要写到哪类后缀模版文件，就需要写入该文件路径及后缀。

   content[
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
   ]

4. 在src/assets文件夹中创建名为main.css的文件（文件名任意，个人建议命名为主css文件），将Tailwind CSS指令放入该文件中(在 “@tailwind” 这样的自定义CSS规则中，会出现警告提示。

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   这时需要在VS Code中，安装官方提供的 [Tailwind CSS IntelliSense ] ,
   
   能够更方便支持 PostCSS 语言，而不是常规的 CSS)，其他JetBrains IDE（如 WebStorm、PhpStorm 等）在 HTML @apply 中使用，WebStorm具体设置请参考这里 WebStorm与Tailwind CSS。

• 这里还需要注意一点，由于VS Code软件本身的原因，即使安装此官方插件过后，仍然有可能出现警告提示，需要在VS Code中使用Tailwind CSS官方插件提供的建议设置：
  在设置中搜索 files.associations,点击 添加项填入键与值,用来告诉 VS Code 始终在 Tailwind CSS 模式下打开 .css 文件：

  键： *.css
  值： tailwindcss

  默认情况下，VS Code 在编辑“字符串”内容时不会触发完成，例如在 JSX 属性值中。更新 editor.quickSuggestions 设置可能会改善您的体验：

  再去搜索 editor.quickSuggestions
  点击 strings 编辑项，设为 on

  并且需要在 “main.js”中导入main.css

  import "./assets/main.css";

  另外，同时也可以安装Prettier 插件，它会按照Tailwind CSS官方推荐的类顺序自动我们编写的类进行排序。
  
  到这里，第4步终于完成啦，呼~

5. 使用 npm run dev 运行生成过程。

   npm run dev

6. 最后就可以通过Tailwind CSS官网提供的工具类名写入自己想要的样式啦~
   VUE3+TailwindCSS组件源码（这里要记得编写Router路由和App.vue里面的<RouterView>呦~）：
   
   效果图：
   

通过Tailwind CSS插件实现卡片的3D翻转效果

在 Tailwind CSS 中 默认情况对于变换模块中的旋转元素实用类仅限在二维（"x"和"y"轴）添加旋转变换，因此如缩放、旋转和平移均只是平面的变换。但由于Tailwingcss具有强大的可插件扩展以及对固定样式的预设配置，就会很方便的实现想要的需求效果，例如：【3D Plugin for Tailwind CSS】插件，不仅仅对“z”轴的支持，还帮助我们实现了对弹跳和旋转动画的扩展，以允许它们在多个方向上操作。当然这里只是简单介绍下该插件，更多实用类名可以点击上述GitHub进行查看学习。下面废话少说直接开始该插件的使用方式及3D卡片的翻转效果：

第一步： 安装Tailwind css的3D插件 与 DaisyUI插件

【注：这里为了减少过多的使用类名导致类名编写过长，使用Tailwindcss组件库DaisyUI进行卡片效果的设计，感兴趣的小伙伴可以去了解下】

/** Tailwind css的3D插件 */
npm install -D tailwindcss-3d

/**  安装 daisyUI 插件*/
npm i -D daisyui@latest

第二步：将插件添加到您的 tailwind.config.js 文件中

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // 可添加 自定义样式 【默认主题扩展】 预设
      height: {
        450: "450px",
      },
    },
  },
  plugins: [
    // 添加Tailwind CSS 的 3D 插件 到您的 tailwind.config.js 文件中
    require("tailwindcss-3d"),
    // 添加Tailwind CSS 的 daisyUI组件库 作为插件 到您的 tailwind.config.js 文件中
    require("daisyui"),
  ],
};

第三步：分组件式实现卡片3D翻转效果,以方便替换各个组件

新建组件01 CardTurnOver： views -> CardTurnOver.vue

<script setup>
//引入组件VUE3组合式写法时，尽可能都写为setup属性，以方便直接引入子组件
import Face from "@/views/card_turn_over_3d/Face.vue";
</script>

<template>
    <!-- 这里的 "lg:h-450"  指在tailwind配置文件中 自定义默认主题扩展样式-->
    <div
      class="card card-side bg-slate-400 rounded-3xl shadow-2xl top-20 left-60 lg:h-450 w-96 perspective-1000"

    // Face 正面组件
     <Face/>
    </div>
</template>

<style scoped></style>

新建组件02 Face：views -> card_turn_over_3d -> Face.vue

<script setup>
import Reverse from "@/views/card_turn_over_3d/Reverse.vue";
</script>

<template>
  <div
    class="w-96 rounded-3xl relative transform-style-3d duration-1000 perspective-origin-center hover:rotate-y-180 bg-gradient-to-br from-teal-300 from-10% via-sky-400 via-30% to-pink-300 to-90%"
  >
    <div class="absolute backface-hidden z-[2]">
      <h4 class="text-4xl mt-14 ml-40 font-semibold antialiased">正面</h4>
      <figure class="mt-8 ml-32 w-32 h-32 transform-gpu">
        //  图片可自行在emojiall进行下载
        <img
          src="../../assets/😀(120 x 120).png"
          alt="嘿嘿笑脸"
          class=""
        />
      </figure>
    </div>
    // Reverse 反面组件
    <Reverse />
  </div>
</template>

<style scoped></style>

新建组件03 Reverse：views -> card_turn_over_3d -> Reverse.vue

<script setup></script>

<template>
  <div class="absolute backface-hidden rotate-y-180">
    <h4 class="text-4xl mt-14 font-semibold antialiased">反面</h4>
    <figure class="mt-8 w-32 h-32 mr-28 transform-gpu">
        //  图片可自行在emojiall进行下载
      <img
        src="../../assets/😍(120 x 120).png"
        alt="花痴笑脸"
        class=""
      />
    </figure>
  </div>
</template>

<style scoped></style>

在App.vue中编写Router视图

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

<style scoped></style>

最后一定要记得写路由呀，而且path路径必须为 "/" 才方可找到CardTurnOver.vue父组件

//router文件夹 -> index.js
//并在main.js 全局引入与use

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "cardTurnOver",
      component: () => import("@/views/CardTurnOver.vue"),
    },
    // {
    //   path: "/home",
    //   name: "home",
    //   component: () => import("@/views/HomeView.vue"),
    // },
  ],
});

export default router

最终 卡片的3D翻转 效果图：

其他实用类请自行到TailwindCSS官网 与 DaisyUI组件库 进行学习，在这里只解释卡片翻转效果实现的实用类名

Class实用类	属性 功能	使用解释说明
transform-style-3d	transform-style: preserve-3d	为使CardTurnOver的子元素组件卡片变换样式具有3D效果，需用到preserve-3d保持为此属性值
rotate-y-180	transform: rotateY(180deg);	这里主要通过“hover:rotate-y-180” 监听鼠标状态使卡片仅在悬停时环绕Y轴(逆时针)方向旋转180度
duration-1000	transition-duration: 100ms;	控制子组件Face卡片至Reverse卡片转换的过渡持续时间
perspective-origin-center	perspective-origin: center;	由于CSS中的坐标系原点并非数学和构造中在左下角，而是正好与之相反，其坐标系的原点（x = 0,y = 0 ） 在二维空间中是浏览器窗口的左上角，即x正值方向从该原点向右，y正值方向从该原点向下。【所以在卡片进行旋转时在二维空间实际是只需一个点即可实现旋转，但由于3D翻转效果需要在三维空间进行旋转变换，这时就需要找到两个中心点即Y轴与Z轴方向，进而需要透视原点的属性值center，有点儿相当于transform-origin: center center;】
z-[2]	z-index: 2;	控制元素z轴堆叠顺序，数值较大的重叠元素会覆盖较小的元素，“z-[2]”此写法为没有特定意义的一次性任意值，方括号中的任意值可动态生成属性
backface-hidden	backface-visibility: hidden;	设置反面的可见性为隐藏效果
transform-gpu	backface-visibility: hidden;	如果过渡在由 GPU 而不是 CPU 渲染时性能更好，则可以通过添加 transform-gpu 实用程序来强制硬件加速(来自TailwindCSS官网)
perspective-1000	perspective: 1000px;	我个人认为是对透视感进行感官上的放大效果，可以显得其3D效果更加真实

到这里卡片3D翻转效果就完成啦！若是喜欢、有想了解的技术话题随时可以留言🗪 或者 点赞💖、关注👀 喔~

---

文章内容涉及的几个友情网站链接：
TailwindCSS 官网：[ https://tailwindcss.com/ ]
DaisyUI组件库：[ https://daisyui.com/ ]
3D Plugin for Tailwind CSS：[ https://github.com/sambauers/tailwindcss-3d?tab=readme-ov-file#3d-plugin-for-tailwind-css ]
EMOJIAll中文官方网站：[ https://www.emojiall.com/zh-hans ]