博客 / 詳情

返回

如何在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 ] ,
    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官方推薦的類順序自動我們編寫的類進行排序。
    Prettier - Code formatter
    到這裏，第4步終於完成啦，呼~

  1. 使用 npm run dev 運行生成過程。

    npm run dev
  2. 最後就可以通過Tailwind CSS官網提供的工具類名寫入自己想要的樣式啦~
    VUE3+TailwindCSS組件源碼（這裏要記得編寫Router路由和App.vue裏面的<RouterView>呦~）：
    VUE3+TailwindCSS組件源碼
    效果圖：
    效果圖

通過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翻轉 效果圖：
3D Plugin for Tailwind CSS實現卡片的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 ]

vue.js , tailwind-css , visual-studio , postcss , npm
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.