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

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