> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  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.
</Info>

## 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**

```css theme={null}
@utility h-hairline {
    height: hairlineWidth();
}

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

**Usage Example**

```tsx theme={null}
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**

```css theme={null}
@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()`:

```css theme={null}
/* Equivalent — prefer the first form */
font-size: fontScale(0.9);
font-size: calc(fontScale() * 0.9);
```

**Usage Example**

```tsx theme={null}
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**

```css theme={null}
@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()`:

```css theme={null}
/* Equivalent — prefer the first form */
width: pixelRatio(2);
width: calc(pixelRatio() * 2);
```

**Usage Example**

```tsx theme={null}
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**

```css theme={null}
@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**

```tsx theme={null}
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>
```

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

## Related

<CardGroup cols={2}>
  <Card title="CSS Parser" icon="css" href="/api/css">
    Learn about CSS variable support and custom CSS classes
  </Card>

  <Card title="Theming" icon="palette" href="/theming/basics">
    Combine with themes for powerful styling
  </Card>
</CardGroup>