tailwind v3 升级 v4

移除postcss.config.js，引入新插件

若你使用的是 vite 则可移除postcss.config.js，使用 @tailwindcss/vite 专用插件

arduino 复制代码

// postcss.config.js
export default {
  plugins: {
    - tailwindcss: {},
    - autoprefixer: {},
    + "@tailwindcss/postcss": {},
  },
};

javascript 复制代码

// vite.config.ts
import { defineConfig } from "vite";
+ import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
+   tailwindcss(),
  ],
});

依赖变更

移除依赖：autoprefixer | postcss

升级依赖：tailwindcss | prettier-plugin-tailwindcss

添加依赖：@tailwindcss/vite

引入tailwind样式

scss 复制代码

// tailwind.css
- @tailwind base;
- @tailwind components;
- @tailwind utilities;

+ @import 'tailwindcss';

Tailwind CSS v4 不能与 Sass、Less 或 Stylus 等 CSS 预处理器一起使用，你需要将 @tailwind 指令放在 .css 文件的开头，详见 Tailwind CSS - Compatibility。

配置文件变更

v4 版本中将不会自动检测 tailwind.config.js 你需要使用 @config 指令手动加载它

less 复制代码

// tailwind.css
+ @config "../../tailwind.config.js";

实际测试过程中仅部分配置生效，需参考tailwind对应设置下的自定义样式配置

less 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // 在 v4 中有效
      colors: {
        primary: '#ff6600',
        word: '#262626',
        rise: '#f22323',
        fall: '#00a000',
      },
      // 在 v4 中无效
      screens: {
        desktop: '1700px',
      },
    },
  },
  plugins: [],
};

最后改为

css 复制代码

// tailwind.css
@theme {
  --color-primary: #ff6600;
  --color-word: #262626;
  --color-rise: #f22323;
  --color-fall: #00a000;

  --breakpoint-desktop: 1700px;
}

.main-content-w {
  @apply max-desktop:w-[800px] w-[1060px];
}

.main-content {
  @apply max-desktop:w-[800px] w-[1060px] pt-5;
}

@tailwindcss/vite 目前仅支持ESM

之前由于某些项目工具原因，移除了package.json 中的 "type": "module"，导致 Node.js 将 .js 文件视为 CommonJS 模块，而无法加载仅支持 ES 模块的包，后来发现项目工具已经支持了，就把 "type": "module" 加回来了

已有样式变更及其他部分部分

v4 对已有的部分clas做了样式调整，需参考升级文档进行全局替换，其他介绍部分，目前在项目中暂未使用，具体变更细节参考官方升级指南：tailwindcss.com/docs/upgrad...