CSS Functions

Use CSS functions to create dynamic styles

Overview

Uniwind provides device-specific CSS functions that automatically adapt to platform characteristics. These functions help you create responsive styles that work seamlessly across different devices and screen densities.

CSS functions must be defined as utilities in your global.css file before use. You cannot use them directly in className props with arbitrary values.

Available Functions

hairlineWidth()

Returns the thinnest line width that can be displayed on the device. Perfect for creating subtle borders and dividers.

Define in global.css

@utility h-hairline {
    height: hairlineWidth();
}

@utility w-hairline {
    width: calc(hairlineWidth() * 10); /* 10 * device hairline width */
}

Usage Example

import { View } from 'react-native'

<View className="w-hairline border-gray-300" />

fontScale()

Multiplies a base font size by the device’s font scale setting (accessibility setting). This ensures your text respects user preferences for larger or smaller text.

Define in global.css

@utility text-sm-scaled {
    font-size: fontScale(0.9);
}

@utility text-base-scaled {
    font-size: fontScale();
}

You can pass a numeric argument directly to fontScale() instead of wrapping it in calc():

/* Equivalent — prefer the first form */
font-size: fontScale(0.9);
font-size: calc(fontScale() * 0.9);

Usage Example

import { Text } from 'react-native'

// Multiple text sizes
<Text className="text-sm-scaled text-gray-600">Small text</Text>
<Text className="text-base-scaled">Regular text</Text>

pixelRatio()

Multiplies a value by the device’s pixel ratio. Useful for creating pixel-perfect designs that scale appropriately across different screen densities.

Define in global.css

@utility w-icon {
    width: pixelRatio();
}

@utility w-avatar {
    width: pixelRatio(2);
}

You can pass a numeric argument directly to pixelRatio() instead of wrapping it in calc():

/* Equivalent — prefer the first form */
width: pixelRatio(2);
width: calc(pixelRatio() * 2);

Usage Example

import { View, Image } from 'react-native'

<Image
  source={{ uri: 'avatar.png' }}
  className="w-avatar rounded-full"
/>

light-dark()

Returns different values based on the current theme mode (light or dark). This function automatically adapts when the theme changes, making it perfect for creating theme-aware styles without manual theme switching logic.

Define in global.css

@utility bg-adaptive {
    background-color: light-dark(#ffffff, #1f2937);
}

@utility text-adaptive {
    color: light-dark(#111827, #f9fafb);
}

@utility border-adaptive {
    border-color: light-dark(#e5e7eb, #374151);
}

Usage Example

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

<View className="bg-adaptive border-adaptive border p-4 rounded-lg">
  <Text className="text-adaptive">
    This text and background automatically adapt to light/dark theme
  </Text>
</View>

The light-dark() function is particularly useful for maintaining color consistency across themes without needing separate CSS variables for each theme.

Related

CSS Parser

Learn about CSS variable support and custom CSS classes

Theming

Combine with themes for powerful styling