tailwindcss v3升级v4

紫麦熊2026-01-21 10:24

之前安装的时候由于 npx tailwindcss init -p 报错，网上搜索的解决方案是降级到v3.4.17，现在业务需求使用的AI Elements只支持v4所以不得不升级

项目使用vite构建，其他如webpack可能不适用

官网升级参考https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

复制代码

 npx @tailwindcss/upgrade

升级后有些样式不是原来的样子，除了文件内的css名称修改，index.css的配置多了这一行

复制代码

@import 'tailwindcss' layer(utilities);

有这2行应该就行

复制代码

@import 'tailwindcss';
@config "../tailwind.config.js";

手动升级参考https://tailwindcss.com/docs/installation/using-vite

1.卸载原安装的tailwindcss postcss autoprefixer 删除postcss.config.js/ts (非vite项目不用卸载postcss和autoprefixer，不用删配置文件)

复制代码

yarn remove tailwindcss postcss autoprefixer

2.安装tailwindcss和@tailwindcss/vite

复制代码

yarn add -D tailwindcss @tailwindcss/vite

3.index.css文件导入tailwindcss

复制代码

@import "tailwindcss";
@config "../tailwind.config.js";

4.vite.config.ts配置tailwindcss

复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})