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

88次阅读

共计 6265 个字符，预计需要花费 16 分钟才能阅读完成。

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 步终于实现啦，呼~

  1. 应用 npm run dev 运行生成过程。

    npm run dev
  2. 最初就能够通过 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]

正文完
tailwind-css
发表至： tailwindcss
2024-03-05
 0
关于tailwind-css:Vue2中使用tailwindcss
关于tailwind-css:如何在Vue3项目中安装使用Tailwind-CSS-以及通过Tailwind-CSS插件实现卡片的3D翻转效果
关于tailwind-css:Wallyswifi7-Qualcomm-ipq9574qcn9274highperformance