Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Indirect variables defined in Tailwind's CSS file aren't updated by VariableContextProvider when underlying variable changes

未關閉
  • 哪裡不對？
#213 2 則留言 0 個 reaction 已指派 1 人 在 GitHub 檢視

維護者通常 3 天內回覆

@danstepanov 已經在處理了。

開始於 2026年7月15日。

評估

這個 Issue 還沒有評估資料。

描述

bug deferred (post-5.0)
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

When defined in TailwindCSS's @theme directive, if a variable depends on another's value, (for example, --color-primary: hsl(var(--primary))), updating the source variable (--primary in this example) in VariableContextProvider doesn't propagate to the derived variable (--color-primary in this example).

Library version

^3.0.0 (+ Nativewind 5.0.0-preview.1)

Environment info
System:
  OS: macOS 26.0.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 607.86 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: /Users/h/.nvm/versions/node/v22.18.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.3
    path: /Users/h/.nvm/versions/node/v22.18.0/bin/npm
  Watchman:
    version: 2025.09.01.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.8
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true
Steps to reproduce
  1. In your global.css add:
@theme {
	--color-primary: hsl(var(--primary));
}
@layer base {
	:root {
    	--primary: 0 0% 9%;
     }
}
  1. Then anywhere in your React Native tree:
<VariableContextProvider
	value={{
		'--primary': '80 76% 61%', // green
	}}
>
	{/* Doesn't work, renders the static `--primary` defined in global.css (`hsl(0 0% 9%)`) */}
	<View className="size-10 bg-[var(--color-primary)]" />
	{/* Renders green - variable is working */}
	<View className="size-10 bg-[hsl(var(--primary))]" />
</VariableContextProvider>

I've tried reproducing without any values in .css, but the following won't work. That seems to be a different bug?

<VariableContextProvider
	value={{
		'--custom': '0 0% 9%',
		'--custom-color': 'hsl(var(--custom))',
	}}
>
	<VariableContextProvider
		value={{
			'--custom': '80 76% 61%',
		}}
	>
		{/* Doesn't work - apparently var(--color-custom) never got defined with a valid --custom value */}
		<View className="size-10 bg-[var(--color-custom)]" />
		{/* Works */}
		<View className="size-10 bg-[hsl(var(--custom))]" />
	</VariableContextProvider>
</VariableContextProvider>

Thank you for your work in this amazing library! Huge unlock being able to port a good chunk of my web skills into RN UI 😄

Reproducible example repository

https://github.com/nativewind/react-native-css/issues?q=Indirect%20variables

主要語言
TypeScript
星號
166
分支
45
平均合併
13 天 14 小時
30 天內合併 PR
1

環境準備

  • 沒有 Dockerfile 或 Docker Compose 檔案
  • 沒有 Pull Request 範本
  • 閱讀貢獻指南

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

nativewind/react-native-css 的其他 Issue

查看 nativewind/react-native-css 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。