2025Tailwindcss+vite+ts安装，3步搞定前言可能因为tailwind版本迭代的原因，网上的安装步骤

前言

可能因为tailwind版本迭代的原因，网上的安装步骤乱七八糟这是2025最新版本安装步骤，三步缺一不可。

第一步：安装依赖

npm install tailwindcss @tailwindcss/vite -D

运行完成效果

第二步

在vite.config.ts文件中添加下面关键代码

import { fileURLToPath, URL } from 'node:url';
// +@tailwindcss/vite
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  //+ tailwindcss()
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

第三步

在main中导入


//+添加这一行
import 'tailwindcss/index';
import { createApp } from 'vue'
import App from './App.vue'

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