TailwindCSS v4无法使用数字+字母自定义类名？求兼容v3方案

问题确认 #

情况属实。TailwindCSS v4对类名解析规则做了调整，数字直接衔接字母的无分隔符命名（如0507EB）会被判定为无效标识符，而带连字符分隔的命名（如tw-1000）符合新的类名规范，因此能正常识别。

兼容v3自定义类名的实现方式 #

方法1：通过@layer utilities手动生成类名 #

在项目CSS入口文件中，用@layer utilities直接声明原有自定义类，绕过Tailwind的自动解析规则：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-0507EB {
    color: #0507EB;
  }
}

这种方式完全保留v3的类名使用习惯，不受v4类名规则限制。

方法2：修改Tailwind配置的类名解析正则 #

如果需要批量兼容这类命名，可在tailwind.config.js中自定义classRegex，调整颜色类的匹配规则，允许数字开头的后缀：

export default {
  classRegex: {
    // 自定义颜色类正则，匹配text-xxx格式，xxx允许数字开头
    color: [/text-([\dA-Za-z]+)/, /bg-([\dA-Za-z]+)/],
    // 可按需添加border-color等其他属性的匹配正则
  },
  theme: {
    extend: {
      colors: {
        '0507EB': '#0507EB',
      },
    },
  },
}

修改后，Tailwind会正确识别text-0507EB这类类名，并关联到配置的自定义颜色。

方法3：给颜色添加兼容别名（过渡方案） #

若想逐步迁移到v4规范，可在配置中给自定义颜色同时设置规范别名和原类名：

export default {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#0507EB', // v4规范命名
        '0507EB': '#0507EB', // 保留原命名
      },
    },
  },
}

这种方式可同时支持text-custom-blue（v4规范）和text-0507EB（v3原有类名），方便逐步替换代码中的旧类名。

内容的提问来源于stack exchange，提问作者Maulana Rahman Nur