theme()函数仅限插件内部调用，css中使用如@media (min-width: theme('screens.md'))无效；自定义颜色或断点必须写入tailwind.config.js的theme.extend下，且需在html中真实使用类名才能被jit生成。
theme() 函数只能在插件内部调用
你在 tailwind.config.js 顶层写 theme: { extend: { colors: { myRed: '#ef4444' } } } 是有效的，但若在 CSS 文件里写 @media (min-width: theme('screens.md'))，这个 theme() 完全不会被解析——它不是 CSS 原生函数，PostCSS 插件链根本不会处理它。浏览器看到的只是无效语法，整条媒体查询会被丢弃。
自定义颜色/断点必须显式写进 config 的 theme 字段
常见错误是把自定义值塞进插件外的任意位置，比如：
- 在
plugins数组里直接require('./my-theme')，但没把它 merge 进theme.extend - 在插件函数里调用了
addUtilities，却忘了先用theme('colors.myRed')拿值——此时theme()可用，但仅限该函数作用域内 - 写了
theme: { screens: { '2xl': '1536px' } }，但漏掉extend:，导致覆盖了默认断点（Tailwind v4 默认只保留sm–3xl）
HTML/CSS 中引用自定义 color 需类名真实存在
即使 tailwind.config.js 正确配置了 myRed，你也得在源码中字面量写出 text-myRed 或 bg-myRed，否则 JIT 引擎不会生成对应规则。动态拼接如 class="text-${color}" 不会触发扫描，必须加进 safelist：
module.exports = {
content: ['./src/**/*.{vue,js,ts}'],
safelist: ['text-myRed', 'bg-myRed'],
theme: {
extend: {
colors: { myRed: '#ef4444' }
}
}
}
Vite 8 + Tailwind v4 下 theme 扩展可能被静默忽略
当前 @tailwindcss/vite 插件不支持 Vite 8，导致 PostCSS 阶段未运行，整个 tailwind.config.js（包括 theme）被跳过。现象是：配置改了、重启服务、devtools 里也看不到任何 Tailwind 生成的类——连基础 text-red-500 都失效。
验证方式：删掉 theme.extend.colors，看默认颜色类是否恢复；若仍不生效，基本可锁定是构建链路中断，不是 theme 配置问题。
真正容易被忽略的是：Vite 8 用户哪怕把 theme 写得再规范，只要没降级或换回 Tailwind v3，就不可能生效——这不是配置技巧问题，是工具链断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
