Vue3+Vite 使用TailwindCSS和motion-v

一、安装使用TailwindCSS

 1.官网：Tailwind CSS 中文网 

2.安装：

npm install tailwindcss @tailwindcss/vite

3.配置vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4.导入css文件

@import "tailwindcss";

5.测试

 <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

6.效果如图

二、安装motion-v

1.官网： https://motion.dev/

2.安装

npm install unplugin-vue-components -D
npm install motion-v

3.配置vite.config.js

import Components from 'unplugin-vue-components/vite'
import MotionResolver from 'motion-v/resolver'

export default defineConfig({
  plugins: [
    Components({
      dts: true,
      resolvers: [
        MotionResolver()
      ],
    }),
  ],
})

4.测试：

<template>
  <motion.div
    :whileHover="{ scale: 1.2 }"
    :whilePress="{ scale: 0.8 }"
    class="box"
  />
</template>

<script setup>
import { motion } from "motion-v"
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #0d63f8;
    border-radius: 10px;
  }
</style>

5.效果如图

三、安装DaisyUI

1.官网：https://daisyui.com/

2.安装

npm i -D daisyui@latest

3.导入css文件

@import "tailwindcss";
@plugin "daisyui";

4.测试

<button class="btn">Button</button>

5.效果如图