一、创建vue项目（详细看vue官网）

npm create vue@latest

截图：

---

注意：以当前命令创建的vue项目在npm run dev后无法正常显示，需要调整vite.config.ts加入host

--2025.10.21

完整代码：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

---

二、安装TailwindCss4

npm install tailwindcss @tailwindcss/vite

三、配置TailwindCss

1.vite.congif.ts引入@tailwindcss/vite

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

2.引用TailwindCss（二选一）

a.在css文件中引用，并挂载到main.ts中，从而实现全局挂载

main.css文件

@import 'tailwindcss';

main.ts文件

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

b.在根文件App.vue中引用（已经引用到main.ts，省去一步）

<style scoped>
@import 'tailwindcss';
</style>

四、使用TailwindCss

<template>
  <div class="flex flex-col items-center justify-center">
    <img alt="Vue logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="font-[600] text-[#2c3e50] text-[2.5rem] mt-3">
      vue 3 + vite + typescript + tailwindcss4
    </div>
  </div>
</template>

---

注意：若有另外的css文件全局挂载使用可能会覆盖掉Tailwindcss的样式；

例如create下来的vue示例中的base.css会覆盖font-[600]、mt-3样式

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}