【Debug】将tailwindcss引入vue失效怎么处理2025最新

最新的vue项目配置tailwindcss
(带vite的vue项目)

1. 安装

npm install tailwindcss @tailwindcss/vite

2. 修改vite.config.ts

//添加两行
import tailwindcss from '@tailwindcss/vite'//add
export default defineConfig({
  plugins: [
    tailwindcss(),//add
  ],
})

3. 修改style.css

@import "tailwindcss"; /*add*/

4. 修改main.ts

import './style.css'

5. .vue文件中添加 比如App.vue

//测试放入一行带tailwindcss的标签
<template>
<h1 class="text-4xl font-bold text-blue-500">Hello Tailwind</h1>
</template>
<style scoped> 
@import "./style.css";//add

6. 构建yarn run dev
   如果看到蓝色字体，引入成功。