关于tailwind-css:如何在Vue3项目中安装使用Tailwind-CSS-以及通过Tailwind-CSS插件实现卡片的3D翻转效果
<article class=“article fmt article-content”><blockquote><h4><strong>Tailwind CSS简略介绍 </strong></h4><p>对于 Tailwind CSS 想必大家都有所耳闻，是一种疾速 UI 开发的实用工具集 原子化 CSS 框架，而对于 如何组织CSS规定，可分为两个派别 [语义化CSS] 与 [原子化CSS]，[语义化CSS] 比拟好了解，例如：从这几段CSS源码就能够大略通晓需要是想当鼠标停留在文字上时实现一个根底的提示框内容以及定位的形式等【此段CSS源码来源于 菜鸟教程】.</p></blockquote><pre><code class=“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;}</code></pre><p>而所谓 [原子化CSS] 我的了解就是将开发中所需的CSS款式封装为一套残缺的最小单位的实用工具类，代表这一个曾经定义好的CSS 规定。</p><p>应用Tailwind CSS时，个别只需在class属性中书写官网提供好的工具类即可实现所需的 UI界面，当然可能会因为非凡的款式须要装置一些插件，比方上面本文将要实现卡片的3D翻转成果，就须要下载插件方可食用。相较于传统编写CSS款式：无需思考类名起名问题，不必在内部css文件重复跳转查看多个CSS文件，缩小编写对于简单款式的艰难量。当然也存在一些毛病，须要记忆一些类名并且在HTML中编写很长的类名，不利于治理，减少在对于公司外部的UI设计过程中从语义化CSS到原子化CSS的转变，而且可能都须要对设计零碎都要懂。这也是很多程序员对Tailwind CSS产生分歧的一方面起因。另外，国外对于此原子化CSS的接受程度却在逐年晋升。</p><blockquote><h4><strong>装置 Tailwind CSS</strong></h4><p>因为自己对此感触稍有粗浅，就节约了一些言舌，上面开始立刻装置Tailwind CSS：<br/>首先在Vue3中应用Tailwind CSS就须要惯例的npm命令，在此大家对于Vue3的装置都曾经驾轻就熟，那间接上终端命令：</p></blockquote><p>装置Vue3命令：</p><pre><code>npm create vue@latest</code></pre><ol><li><p>装置Tailwind CSS命令：</p><pre><code>npm install -D tailwindcss postcss autoprefixer</code></pre></li><li><p>应用 Tailwind CLI 来为我的项目生成 Tailwind 配置文件 与 postcss 配置文件<br/>留神，在此处如须要生成其余配置文件，例如：TypeScript 配置文件 则应用 “ –ts”，具体其余配置文件请参考官网 “配置”。</p><pre><code>npx tailwindcss init -p</code></pre></li><li><p>当生成并呈现 后，须要在导出的对象中content[]数组配置增加所需模版文件的门路，即为将要写到哪类后缀模版文件，就须要写入该文件门路及后缀。</p><pre><code>content[ “./index.html”, “./src/**/.{vue,js,ts,jsx,tsx}”,]</code></pre></li><li><p>在src/assets文件夹中创立名为main.css的文件（文件名任意，集体倡议命名为主css文件），将Tailwind CSS指令放入该文件中(在 “@tailwind” 这样的自定义CSS规定中，会呈现正告提醒。</p><pre><code>@tailwind base;@tailwind components;@tailwind utilities;</code></pre><p>这时须要在VS Code中，装置官网提供的 [Tailwind CSS IntelliSense ] ,<br/> <br/>可能更不便反对 PostCSS 语言，而不是惯例的 CSS)，其余JetBrains IDE（如 WebStorm、PhpStorm 等）在 HTML @apply 中应用，WebStorm具体设置请参考这里 WebStorm与Tailwind CSS。</p></li></ol><ul><li><p>这里还须要留神一点，因为VS Code软件自身的起因，即便装置此官网插件过后，依然有可能呈现正告提醒，须要在VS Code中应用Tailwind CSS官网插件提供的倡议设置：<br/>在设置中搜寻 <code>files.associations</code>,点击 增加项填入键与值,用来通知 VS Code 始终在 Tailwind CSS 模式下关上 .css 文件：</p><pre><code>键： .css值： tailwindcss</code></pre><p>默认状况下，VS Code 在编辑“字符串”内容时不会触发实现，例如在 JSX 属性值中。更新 editor.quickSuggestions 设置可能会改善您的体验：</p><pre><code>再去搜寻 editor.quickSuggestions点击 strings 编辑项，设为 on</code></pre><p>并且须要在 “main.js”中导入main.css</p><pre><code>import “./assets/main.css”;</code></pre><p>另外，同时也能够装置Prettier 插件，它会依照Tailwind CSS官网举荐的类程序主动咱们编写的类进行排序。<br/><br/>到这里，第4步终于实现啦，呼~</p></li></ul><ol start=“5”><li><p>应用 <code>npm run dev</code> 运行生成过程。</p><pre><code>npm run dev</code></pre></li><li>最初就能够通过Tailwind CSS官网提供的工具类名写入本人想要的款式啦~<br/>VUE3+TailwindCSS组件源码（这里要记得编写Router路由和App.vue外面的<RouterView>呦~）：<br/><br/>效果图：<br/></li></ol><blockquote><h4><strong>通过Tailwind CSS插件实现卡片的3D翻转成果</strong></h4><p>在 Tailwind CSS 中 默认状况对于变换模块中的旋转元素实用类仅限在二维（“x"和"y"轴）增加旋转变换，因而如缩放、旋转和平移均只是立体的变换。但因为Tailwingcss具备弱小的可插件扩大以及对固定款式的预设配置，就会很不便的实现想要的需要成果，例如：【<strong>3D Plugin for Tailwind CSS</strong>】插件，不仅仅对“z”轴的反对，还帮忙咱们实现了对弹跳和旋转动画的扩大，以容许它们在多个方向上操作。当然这里只是简略介绍下该插件，更多实用类名能够点击上述GitHub进行查看学习。上面废话少说间接开始该插件的应用形式及3D卡片的翻转成果：</p></blockquote><p>第一步： 装置Tailwind css的3D插件 与 DaisyUI插件</p><blockquote>【注：这里为了缩小过多的应用类名导致类名编写过长，应用Tailwindcss组件库DaisyUI进行卡片成果的设计，感兴趣的小伙伴能够去理解下】</blockquote><pre><code>/* Tailwind css的3D插件 /npm install -D tailwindcss-3d/* 装置 daisyUI 插件*/npm i -D daisyui@latest</code></pre><p>第二步：将插件增加到您的 tailwind.config.js 文件中</p><pre><code>/** @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”), ],};</code></pre><p>第三步：分组件式实现卡片3D翻转成果,以不便替换各个组件</p><blockquote>新建组件01 CardTurnOver： views -> CardTurnOver.vue</blockquote><pre><code><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></code></pre><blockquote>新建组件02 Face：views -> card_turn_over_3d -> Face.vue</blockquote><pre><code><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></code></pre><blockquote>新建组件03 Reverse：views -> card_turn_over_3d -> Reverse.vue</blockquote><pre><code><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></code></pre><blockquote>在App.vue中编写Router视图</blockquote><pre><code><script setup>import { RouterLink, RouterView } from ‘vue-router’</script><template> <RouterView /></template><style scoped></style></code></pre><blockquote>最初肯定要记得写路由呀，而且path门路必须为 “/” 才方可找到CardTurnOver.vue父组件</blockquote><pre><code>//router文件夹 -> index.js//并在main.js 全局引入与useimport { 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</code></pre><blockquote><p>最终 卡片的3D翻转 效果图：<br/></p><p>其余实用类请自行到<strong>TailwindCSS官网</strong> 与 <strong>DaisyUI组件库</strong> 进行学习，在这里只解释卡片翻转成果实现的实用类名</p><table><tbody><tr><td><strong>Class实用类</strong></td><td><strong>属性 性能</strong></td><td><strong>应用解释阐明</strong></td></tr><tr><td>transform-style-3d</td><td>transform-style: preserve-3d</td><td>为使CardTurnOver的子元素组件卡片变换款式具备3D成果，需用到preserve-3d放弃为此属性值</td></tr><tr><td>rotate-y-180</td><td>transform: rotateY(180deg);</td><td>这里次要通过“hover:rotate-y-180” 监听鼠标状态使卡片仅在悬停时盘绕Y轴(逆时针)方向旋转180度</td></tr><tr><td>duration-1000</td><td>transition-duration: 100ms;</td><td>管制子组件Face卡片至Reverse卡片转换的过渡持续时间</td></tr><tr><td>perspective-origin-center</td><td>perspective-origin: center;</td><td>因为CSS中的坐标系原点并非数学和结构中在左下角，而是正好与之相同，其坐标系的原点（x = 0,y = 0 ） 在二维空间中是浏览器窗口的左上角，即x正值方向从该原点向右，y正值方向从该原点向下。【所以在卡片进行旋转时在二维空间理论是只需一个点即可实现旋转，但因为3D翻转成果须要在三维空间进行旋转变换，这时就须要找到两个中心点即Y轴与Z轴方向，进而须要透视原点的属性值center，有点儿相当于transform-origin: center center;】</td></tr><tr><td>z-[2]</td><td>z-index: 2;</td><td>管制元素z轴重叠程序，数值较大的重叠元素会笼罩较小的元素，“z-[2]”此写法为没有特定意义的一次性任意值，方括号中的任意值可动静生成属性</td></tr><tr><td>backface-hidden</td><td>backface-visibility: hidden;</td><td>设置背面的可见性为暗藏成果</td></tr><tr><td>transform-gpu</td><td>backface-visibility: hidden;</td><td>如果过渡在由 GPU 而不是 CPU 渲染时性能更好，则能够通过增加 transform-gpu 实用程序来强制硬件加速(来自TailwindCSS官网)</td></tr><tr><td>perspective-1000</td><td>perspective: 1000px;</td><td>我集体认为是对透视感进行感官上的放大成果，能够显得其3D成果更加实在</td></tr></tbody></table></blockquote><p>到这里卡片3D翻转成果就实现啦！若是喜爱、有想理解的技术话题随时能够留言 或者 点赞、关注 喔~</p><hr/><p>文章内容波及的几个情谊网站链接：<br/>TailwindCSS 官网：[ https://tailwindcss.com/ ]<br/>DaisyUI组件库：[ https://daisyui.com/ ]<br/>3D Plugin for Tailwind CSS：[ https://github.com/sambauers/tailwindcss-3d?tab=readme-ov-file#3d-plugin-for-tailwind-css ]<br/>EMOJIAll中文官方网站：[ https://www.emojiall.com/zh-hans ]</p></article> ...