VS Code中Tailwind CSS配置错误：无效主题值致样式未生成

问题根源 #

你写的w-[calc(100%-theme('spacing[some_key][1.5]'))]存在两个核心问题：

• calc语法里的中括号与Tailwind主题函数的中括号嵌套冲突，导致解析失败
• 若some_key不是tailwind.config.js中自定义的spacing层级键，Tailwind无法匹配到对应值

解决方案 #

1. 修正主题值引用格式

把主题函数的中括号写法改成点语法，避免嵌套冲突：

<!-- 正确写法 -->
<div class="w-[calc(100%-theme('spacing.some_key.1.5'))]"></div>

如果必须保留中括号，要确保引号嵌套正确：

<div class="w-[calc(100%-theme('spacing[\"some_key\"][\"1.5\"]'))]"></div>

2. 确认spacing配置有效性

如果some_key是自定义spacing键，必须在tailwind.config.js中明确定义：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        some_key: {
          '1.5': '0.375rem', // 可根据需求自定义值，或复用Tailwind默认spacing
        },
      },
    },
  },
}

如果只是想用默认的1.5 spacing值，直接简化为theme('spacing.1.5')即可，无需额外自定义some_key。

3. 恢复全局CSS生效

这个无效类会导致Tailwind的CSS生成流程中断，修正后重新执行CSS构建命令（以CLI为例）：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

确认无其他语法错误后，CSS样式即可正常生成。

内容的提问来源于stack exchange，提问作者Vivek Mishra