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

# Default Styles

> Apply default CSS styles to React Native components

## Overview

Default styles let you define baseline styles for React Native components directly in your CSS file. This is useful when you want every component of a given type to share the same default styling without repeating class names.

<Info>
  Default styles are available only in Uniwind Pro starting from version `1.2.0`.
</Info>

## Enable Default Styles

Default styles are experimental and disabled by default. Enable them in your Metro config:

```js metro.config.js theme={null}
module.exports = withUniwindConfig(config, {
  experimental: {
    defaultStyles: true,
  },
});
```

<Warning>
  This feature is experimental. It may not work for every use case and may include breaking changes in a future release.
</Warning>

<Tip>
  Use Uniwind Pro `1.7.0` or newer with default styles. It fixes components such as `TouchableOpacity` losing theme updates when `experimental.defaultStyles` is enabled.
</Tip>

## Usage

Add component selectors to your CSS file:

```css global.css theme={null}
View {
  border-color: var(--color-primary);
}
```

This applies `border-color: var(--color-primary)` to every `View` in your app.

You can also use default styles to define typography for every `Text` component:

```css global.css theme={null}
Text {
  font-family: Inter;
  font-size: 16px;
}
```

This applies `font-family: Inter` and `font-size: 16px` to every `Text` in your app.

## Supported Components

Default styles support the following React Native components:

| Component |
| - |
| `ActivityIndicator` |
| `FlatList` |
| `Image` |
| `ImageBackground` |
| `InputAccessoryView` |
| `KeyboardAvoidingView` |
| `Modal` |
| `Pressable` |
| `RefreshControl` |
| `SafeAreaView` |
| `ScrollView` |
| `SectionList` |
| `Switch` |
| `Text` |
| `TextInput` |
| `TouchableHighlight` |
| `TouchableNativeFeedback` |
| `TouchableOpacity` |
| `TouchableWithoutFeedback` |
| `View` |
| `VirtualizedList` |

## Style Specificity

Default styles act as baseline styles. More specific styles, such as `className` styles applied directly to a component, can override them.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.