有些 CSS 变量不支持吗？我看 Tailwind 是支持的，但 uni-app 在 app 端实际渲染出来不支持。

[ZCY-G]

我在 @theme {} 中定义了一些变量：

  --color-neutral-1B: #1b1b1b;
  --color-neutral-66: #666666;
  --color-neutral-99: #999999;
  --color-neutral-BB: #bbbbbb;
  --color-neutral-EE: #eeeeee;
  --color-neutral-F8: #f8f8f8;
  --color-neutral-FF: #ffffff;

在 Tailwind Play 看了是生效的，但在 uni-app 中渲染成 app ，只有 66 和 99 有颜色，其他最后一部分有字母的都没有背景颜色。

不知道 weapp-tailwindcss 版本和 tailwindcss 版本是否需要一致？如果有要求，可以加一个 peerDependencies。

    "@dcloudio/uni-app": "3.0.0-4050720250324001",
    "@dcloudio/uni-app-harmony": "3.0.0-4050720250324001",
    "@dcloudio/uni-app-plus": "3.0.0-4050720250324001",
    "@dcloudio/uni-components": "3.0.0-4050720250324001",
    "@dcloudio/uni-h5": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-alipay": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-baidu": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-harmony": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-jd": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-lark": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-qq": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-weixin": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-xhs": "3.0.0-4050720250324001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4050720250324001",
    "@dcloudio/uni-ui": "^1.5.7",
    "tailwindcss": "^4.1.9",
    "weapp-tailwindcss": "^4.1.9"

// vite.config.ts

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import tailwindcss from '@tailwindcss/postcss';
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite';

// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === 'h5';
const isApp = process.env.UNI_PLATFORM === 'app';
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
export default defineConfig(async () => {
  return {
    envDir: './env',
    css: {
      postcss: {
        plugins: [
          tailwindcss({
            base: __dirname
          })
        ]
      },
      preprocessorOptions: { scss: { silenceDeprecations: ['legacy-js-api'] } }
    },
    plugins: [
      uni(),
      uvwt({
        rem2rpx: true,
        disabled: WeappTailwindcssDisabled,
        tailwindcssPatcherOptions: {
          patch: {
            tailwindcss: {
              v4: {
                base: __dirname
              }
            }
          }
        },
        injectAdditionalCssVarScope: true
      }),
      AutoImport({
        imports: ['vue', 'uni-app'], // 自动导入 Vue 和 UniApp 的 API
        dts: 'src/types/auto-imports.d.ts', // 自动生成类型声明文件
        eslintrc: {
          enabled: true, // 生成 ESLint 配置文件
          filepath: './.eslintrc-auto-import.json' // ESLint 配置文件路径
        }
      })
    ]
  };
});

[sonofmagic]

这个最有可能的是由于你app机器的 webview 版本比较低，然后这种 css 不识别，你可以尝试下面 link 的方案，去降级一下 css

https://tw.icebreaker.top/docs/multi-platform

[ZCY-G]

我看了一下 Android System WebView 的版本，是 137 版本的，但使用 bg-neutral-F8 确实没用，用 bg-(--color-neutral-F8) 倒是可以

[sonofmagic]

假如你确定是 css 变量，在你的模拟器或者真机上不支持，但是你一定要兼容到这个版本，而不是设定最低的 webview 版本的话，
你可以使用 postcss-preset-env 的这个配置项 features.custom-properties

所有的特性配置可以参考: https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md
playground： https://preset-env.cssdb.org/playground/