升级一时爽，降级火葬场——tailwind4降级指北

tailwind4的兼容性

虽然tailwind4官网宣称需要chrome111以上版本，但其实chrome 99以上版本就可以使用其大部分能力了。

之所以宣称chrome111版本是因为直到这个版本才支持color-mix，在项目实践中，颜色一般都直接确定了，很少会用到这个特性。但tailwind严重依赖css的级联层，也就是(@layer)，这个特性需要chrome 99以上。

所以如果你的支持目标高于 chrome 99及以上，那可以放心使用tailwind4。

tailwind4降级tailwind3

tailwind4降级到3，主要分为以下几个部分：

依赖和打包配置更新
指令替换和tailwind配置
不兼容特性排查

package.json依赖更新

diff 复制代码

{
-    "@tailwindcss/postcss": "^4.1.11",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^3.3.6",
}

更新webpack配置

diff 复制代码

{
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
-        plugins: [require('@tailwindcss/postcss'), require('autoprefixer')],
+        plugins: {
+          'postcss-import': {},
+          tailwindcss: {},
+          autoprefixer: {},
        }
      },
   },
},

新增配置文件tailwind.config.js

这个文件重点是spacing的处理，tailwind4使用--spacing变量计算间距，而tailwind3则是通过rem，因此最稳妥的方式就是将各spacing全都重新覆盖掉。

css 复制代码

const spacings = [  '1',  '2',  '3',  '4',  '5',  '6',  '7',  '8',  '9',  '10',  '11',  '12',  '14',  '16',  '20',  '24',  '28',  '32',  '36',  '40',  '44',  '48',  '52',  '56',  '60',  '64',  '72',  '80',  '96',  '0.5',  '1.5',  '2.5',  '3.5',];
const leading = [3, 4, 5, 6, 7, 8, 9, 10];
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  important: true,
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      ...spacings.reduce((res, cur) => {
        res[cur] = cur * 4 + 'px';
        return res;
      }, {}),
    },
    extend: {
      lineHeight: leading.reduce((res, cur) => {
        res[cur] = cur * 4 + 'px';
        return res;
      }, {}),
      colors: {
       ...
      },
      boxShadow: {
        sm: '0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
        ...
      },
      fontSize: {
        xs: '12px',
      ...
      },
      borderRadius: {
        xs: '2px',
       ...
      },
    },
  },
  plugins: [],
};

替换tailwindcss导入

diff 复制代码

- @import 'tailwindcss';
- @source "./xxx.less";
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

用:root替换@theme指令

diff 复制代码

- @theme {
-   --color-text-primary: #1d2129;
-   --spacing: 4px;
-   ...其他变量
- }
+ :root {
+   --color-text-primary: theme(colors.xxx);
+   --spacing: 4px;
+   ...其他变量
+ }

更换@utility指令

diff 复制代码

-@utility box-md {
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-  padding: 16px;
-}
+@layer utilities {
+  .box-md {
+    border: 1px solid #e5e6eb;
+    border-radius: 4px;
+    padding: 16px;
+  }
+}

tailwind3中不支持的特性

important

tailwind4中可以对类名增加!简化important写法，在tailwind3中没有该特性，如果大量使用该特性，最好是在tailwind.config.js中开启important。

但这里有个需要注意的点：根据css级联规范，级联层中的important 优先级大于普通的important，比如w-24!和

css 复制代码

#box {
    width: 120px !important;
}

优先级w-24> #box。

这个规则，chrome的devtool显示有bug（见下图），但最终效果是符合css规范的。

部分class的重命名

根据官网所列，检查项目中这些类名使用（实测中，这些类名大多数都可以在tailwind3中使用）