使用 Tailwind 的 Vue 转换
Posted
技术标签:
【中文标题】使用 Tailwind 的 Vue 转换【英文标题】:Vue Transition with Tailwind 【发布时间】:2021-10-30 01:38:56 【问题描述】:为什么 Tailwind 不能直接作用于元素?
这不起作用:
<template>
<transition
enter-class="opacity-0"
enter-active-class="transition-opacity duration-300 ease-out"
leave-class="opacity-0"
leave-active-class="transition-opacity duration-300 ease-out"
>
Test
</transition>
</template>
但是这个:
<template>
<transition name="fade">
Test
</transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active
@apply transition-opacity duration-300 ease-out;
.fade-enter,
.fade-leave-active
@apply opacity-0;
</style>
我需要让它像“但是这个”一样工作,因为我将 Nuxt 与 vite 一起使用并且我没有让 scss 工作,所以@apply 不是一个选项。
谢谢。
【问题讨论】:
【参考方案1】:Vue2 和 Vue3 的语法不同。 感谢这篇帖子custom transition classes don't work on Vue.js
<transition
enter-active-class="duration-300 ease-out"
enter-from-class="transform opacity-0"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="transform opacity-0"
>
Test
</transition>
【讨论】:
以上是关于使用 Tailwind 的 Vue 转换的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中使用 Tailwind CSS 转换背景颜色?
如何在 Tailwind 和 postcss 中将 Html 内容转换为纯文本