如何在vue3+vite4中引入tailwindcss

1.安装依赖

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.生成配置文件

这将会在你的项目生成两个文件(tailwind.config.js和postcss.config.js)

npx tailwindcss init -p

3.引入Tailwind

1.在src目录下创建index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

2.在mian.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

4.成功使用

1.在App.vue中尝试使用

<!-- App.vue -->
<script setup lang="ts">
</script>

<template>
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-12 w-12" src="./assets/vue.svg" alt="ChitChat Logo">
    </div>
    <div>
      <p class="text-gray-500">Successful use tailwindcss!</p>
    </div>
  </div>
</template>

2.结果
出现以下效果，说明已经引入成功