Vue3中使用Tailwind Safelist正则模式时出现TypeError报错求助

云上老周

2026-7-13

问题原因与解决方案

问题分析

报错TypeError: t.test is not a function由两个原因共同导致：

错误的类名条目：safelist中的'text center'是空格分隔的两个类名，而safelist的字符串项必须是单个类名，这种写法会干扰配置解析逻辑。
版本不兼容的正则配置：Tailwind CSS v2.x不支持{ pattern: /.../ }的对象格式，若你安装的是v2版本却使用v3的配置写法，会导致正则解析失败；即使是v3版本，错误的类名条目也可能触发解析异常。

解决方案

1. 修正错误的类名条目

将safelist中的'text center'拆分为两个单独的类名：

// 原错误写法
'text center',
// 改为
'text',
'center',

2. 根据Tailwind版本调整正则配置

若使用Tailwind CSS v2.x

移除正则表达式外层的对象包裹，直接将正则放入safelist数组：

purge: {
  content: ['./src/**/*.html','./src/**/*.vue'],
  safelist: [
    'bg-blue-500',
    'text',
    'center',
    'hover:opacity-100',
    'lg:text-right',
    'duration-1250',
    'duration-1000',
    'duration-200',
    'duration-100',
    'duration-0',
    'opacity-0',
    'opacity-50',
    'opacity-100',
    /bg-(red|green|blue)-(100|200|300)/,
    /opacity-/
  ]
},

若使用Tailwind CSS v3.x

保留对象格式，同时确保配置正确（v3推荐用content替代purge，结构一致）：

content: {
  files: ['./src/**/*.html','./src/**/*.vue'],
  safelist: [
    'bg-blue-500',
    'text',
    'center',
    'hover:opacity-100',
    'lg:text-right',
    'duration-1250',
    'duration-1000',
    'duration-200',
    'duration-100',
    'duration-0',
    'opacity-0',
    'opacity-50',
    'opacity-100',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
    {
      pattern: /opacity-/,
    },
  ]
},