在vue3中使用tailwindcss4.0+

随手记录一下，如何在vue3中使用tailwindCSS

1、安装tailwindcss相关依赖

 pnpm install -D tailwindcss postcss autoprefixer @tailwindcss/vite

我安装的如下：

"dependencies": {
  "@tailwindcss/vite": "^4.1.11",
  "pinia": "^3.0.3",
  "vue": "^3.5.18",
  "vue-router": "^4.5.1"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^6.0.1",
  "autoprefixer": "^10.4.21",
  "postcss": "^8.5.6",
  "tailwindcss": "^4.1.11",
  "vite": "^7.0.6",
  "vite-plugin-vue-devtools": "^8.0.0"
}

2、配置

在 vite.config.js文件中，进行如下配置：

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

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

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

3、引用

在 assets文件夹下建css文件夹，并创建tailwind.css，内容如下：

@import 'tailwindcss';
body {
    width: 100vw;
    height: 100vh;
}
#app{
    width: 100vw;
    height: 100vh;
}

在main.js中进行引入：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './assets/css/tailwind.css'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

完结，撒花~~~~~~