Skip to main content
This utility is deprecated. Use useUnstableNativeVariable from react-native-css instead, or use Tailwind’s CSS variable syntax with the className prop.

​
Overview

The vars utility was used to create and manage CSS variables in React Native applications. It has been deprecated in favor of more stable and performant alternatives.

​
Migration

There are two recommended migration paths: 
import { useUnstableNativeVariable } from 'react-native-css';
import { View } from 'react-native';

function MyComponent() {
  const [vars, setVars] = useUnstableNativeVariable({
    primary: '#3b82f6',
    secondary: '#8b5cf6',
  });

  return (
    <View 
      style={vars}
      className="bg-[--primary] text-[--secondary]"
    />
  );
}

​
Option 2: Use Tailwind CSS Variables Directly

Define variables in your CSS and reference them in your classes:
global.css
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

import { View, Text } from 'react-native';

function MyComponent() {
  return (
    <View className="bg-primary">
      <Text className="text-secondary">Hello</Text>
    </View>
  );
}

​
API Reference (Deprecated)

​
Import

import { vars } from 'nativewind';
The vars utility is re-exported from react-native-css and has been marked as deprecated in NativeWind v5.

​
Type Signature

function vars(variables: Record<string, string | number>): StyleProp<ViewStyle>;

​
Parameters

​
variables
Record<string, string | number>
required
An object containing CSS variable names and their values.
  • Keys should be valid CSS variable names (without the -- prefix)
  • Values can be strings or numbers
  • String values are used as-is
  • Number values are converted to appropriate units

​
Returns

​
return
StyleProp<ViewStyle>
A style object that can be passed to the style prop of React Native components.This object contains the CSS variables in a format compatible with React Native’s styling system.

​
Examples

import { vars } from 'nativewind';
import { View, Text } from 'react-native';

function Card() {
  const cardVars = vars({
    'card-bg': '#ffffff',
    'card-padding': 16,
  });

  return (
    <View 
      style={cardVars}
      className="bg-[--card-bg] p-[--card-padding]"
    >
      <Text>Card Content</Text>
    </View>
  );
}

​
Why Was It Deprecated?

The vars utility was deprecated for several reasons:
  1. Performance: CSS variables defined in Tailwind’s theme configuration are processed at build time, resulting in better runtime performance
  2. Type Safety: Theme variables in Tailwind config provide better TypeScript integration and autocomplete support
  3. Consistency: Using Tailwind’s theme system maintains consistency across your entire application
  4. Maintenance: The react-native-css package provides more stable alternatives like useUnstableNativeVariable for runtime variable management

​
Best Practices

For static values, always prefer Tailwind theme configuration over runtime CSS variables.

​
When to Use Runtime Variables

Only use runtime CSS variables (via useUnstableNativeVariable) when:
  • Values change based on user interaction
  • Values are computed dynamically from props or state
  • You need to animate between different variable values

​
When to Use Theme Configuration

Use Tailwind theme configuration for:
  • Brand colors and design tokens
  • Spacing scales and typography
  • Any values that don’t change at runtime
  • Values shared across multiple components

​
Migration Example

import { vars } from 'nativewind';
import { View, Text } from 'react-native';

function ProductCard({ product }) {
  const cardVars = vars({
    'border-color': product.featured ? '#3b82f6' : '#e5e7eb',
    'bg-color': '#ffffff',
  });

  return (
    <View 
      style={cardVars}
      className="border-[--border-color] bg-[--bg-color] p-4"
    >
      <Text>{product.name}</Text>
    </View>
  );
}