Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#213 コメント 2 件 リアクション 0 件 担当者 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時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nativewind/react-native-css のほかの issue

nativewind/react-native-css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。