Functions & Directives

Overview

Nativewind v5 uses Tailwind CSS v4, which introduces a CSS-first configuration model. Please refer to the Tailwind CSS v4 documentation for the full directive reference.

Tailwind CSS v4 Directives

Example CSS setup

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
 
@import "nativewind/theme";

The nativewind/theme import adds React Native-specific theme values (elevation, platform fonts, safe area utilities) and custom variants (ios:, android:, native:, web:, tv:).

CSS Functions

These CSS functions are polyfilled on native by react-native-css:

var()

var() allows you to use CSS custom properties (variables). Variables can be set in CSS or from JavaScript using the vars() function.

:root {
  --brand-color: #3b82f6;
}
 
.branded {
  color: var(--brand-color);
}

import { View, Text } from "react-native";
import { vars } from "nativewind";
 
function ThemedSection({ brandColor }) {
  return (
    <View style={vars({ "--brand-color": brandColor })}>
      <Text className="text-[--brand-color]">Themed text</Text>
    </View>
  );
}

Variables are inherited through the component tree, just like CSS.

calc()

calc() performs arithmetic in CSS values. Supported unit types:

• Numerical (px): calc(10px + 100px) resolves to 110
• Percentage (%): calc(var(--width) + 20%) resolves correctly
• rem units: calc(2rem * 5) resolves using the platform rem value
• em units: calc(2em * 2) resolves relative to the element's font size
• CSS variables: calc(var(--variable) + 20px) resolves at runtime
• Inside color functions: hsl(calc(var(--H) + 20), 50%, 50%) works for dynamic colors

.element {
  width: calc(10px + 100px);
  padding: calc(2rem * 3);
  margin: calc(var(--spacing) + 8px);
}

env()

env() accesses device-specific environment values. Supported values:

env(safe-area-inset-top);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
env(safe-area-inset-right);

See Safe Area Insets for more information.

color-mix()

color-mix() blends two colors together in a given color space:

.element {
  color: color-mix(in oklch, red 50%, blue);
}

React Native Functions

Nativewind provides additional functions for React Native-specific values:

hairlineWidth()

Returns the thinnest visible line width on the device (maps to StyleSheet.hairlineWidth):

.thin-border {
  border-width: hairlineWidth();
}

roundToNearestPixel()

Rounds a value to the nearest pixel boundary:

.precise {
  height: roundToNearestPixel(32.4);
}

getPixelSizeForLayoutSize()

Converts a layout size to pixel size:

.pixel-precise {
  width: getPixelSizeForLayoutSize(100);
}

platformColor()

Access platform-specific named colors:

.system-blue {
  color: platformColor(systemBlue);
}