tailwind 不支持原生 @function，需用 matchutilities 模拟动态类名生成；theme() 仅安全读取配置路径，不支持动态键；calc() 仅用于值计算，无法生成新类名；所有插件必须注册、路径须正确、values 需显式声明。
不支持直接定义类似 CSS 原生的 @function 那种可复用、带参数的 CSS 函数，但可以通过插件系统模拟等效行为——关键在于用对 API，否则写出来的东西根本不会生效。
为什么不能写 @function 或 calc() 替代方案？
Tailwind 的构建流程在 CSS 编译前就完成了工具类生成，所有类名都必须静态可枚举或正则可匹配。原生 CSS 函数（如 @function size($n) { @return $n * 0.25rem; }）无法被 Tailwind 解析，也不会出现在最终的 utilities.css 中。
-
calc()可以用，但只是值层面的计算，不能生成新类名 —— 比如width: calc(100% - theme('spacing.4'))是合法的，但你没法靠它自动产出w-[calc(100%-1rem)] - 想让
text-fluid-sm、gap-2.5这类“非标准数值”类名可用，必须走matchUtilities，而不是试图在 CSS 里塞函数 - 任何试图在
tailwind.config.js外层写function或const然后直接调用的写法，都会静默失败
matchUtilities 是唯一能模拟“CSS 函数”语义的入口
它接受一个正则和映射函数，把类名字符串解析成参数，再生成对应样式。这才是 Tailwind 认可的“动态类名生成方式”。
- 正确写法：
matchUtilities({ 'text-fluid': (value) => ({ fontSize: `clamp(1rem, ${value}, 2rem)` }) }, { values: { sm: '1.25rem', lg: '1.75rem' } }) - 必须显式传入
values对象，否则text-fluid-sm不会被识别；Tailwind 不会自动扫描你的 JS 变量 - 如果想支持响应式，得手动加
supportsVariants: true，否则md:text-fluid-sm不会生成 - 类名含斜杠（如
aspect-16/9）时，必须解构e并调用e('16/9')，否则生成的类名浏览器无法解析
theme() 不是函数调用，而是配置读取器
它看起来像函数，实际是安全访问 tailwind.config.js 中 theme.extend 定义的路径，不是运行时执行逻辑。
-
theme('colors.brand.500')有效，前提是配置里写了extend: { colors: { brand: { 500: '#3b82f6' } } } -
theme('spacing.${breakpoint}')这类模板字符串写法无效 ——theme()不支持动态键，只认字面路径 - 为防构建失败，建议加 fallback：
theme('colors.primary.500', '#3b82f6') - 不要在
module.exports外层调用theme()，会报theme is not a function
真正麻烦的点不在怎么写，而在验证：类名是否被 content 配置覆盖、插件是否注册进 plugins 数组、e() 是否漏掉、theme() 路径是否拼错——这些地方全无报错，只默默不生成 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
