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

# Responsive Breakpoints

> Use Tailwind's responsive breakpoints to build adaptive layouts in React Native

## Overview

Uniwind supports Tailwind's responsive breakpoint system out of the box, allowing you to create adaptive layouts that respond to different screen sizes. Use breakpoint prefixes like `sm:`, `md:`, `lg:`, and `xl:` to apply styles conditionally based on screen width.

<Info>
  Uniwind uses the same breakpoint syntax as Tailwind CSS. If you're familiar with Tailwind on the web, you already know how to use breakpoints in React Native!
</Info>

## Default Breakpoints

Uniwind includes five default breakpoints based on common device sizes:

| Breakpoint | Minimum Width | CSS                          |
| ---------- | ------------- | ---------------------------- |
| `sm`       | 640px         | `@media (min-width: 640px)`  |
| `md`       | 768px         | `@media (min-width: 768px)`  |
| `lg`       | 1024px        | `@media (min-width: 1024px)` |
| `xl`       | 1280px        | `@media (min-width: 1280px)` |
| `2xl`      | 1536px        | `@media (min-width: 1536px)` |

<Tip>
  All breakpoints use a **mobile-first** approach. This means unprefixed utilities (like `p-4`) apply to all screen sizes, and prefixed utilities (like `md:p-8`) apply at the specified breakpoint and above.
</Tip>

## Basic Usage

Apply different styles at different breakpoints using the breakpoint prefix:

```tsx theme={null}
import { View, Text } from 'react-native'

export const ResponsiveCard = () => (
  <View className="p-4 sm:p-6 lg:p-8 bg-white rounded-lg">
    <Text className="text-base sm:text-lg lg:text-xl font-bold">
      Responsive Typography
    </Text>
    <Text className="text-sm sm:text-base lg:text-lg text-gray-600">
      This text size adapts to screen width
    </Text>
  </View>
)
```

**How it works:**

* On screens `< 640px`: Uses `p-4` and `text-base`
* On screens `≥ 640px`: Uses `p-6` and `text-lg`
* On screens `≥ 1024px`: Uses `p-8` and `text-xl`

## Mobile-First Design

Uniwind uses a mobile-first breakpoint system, meaning you style for mobile first, then add styles for larger screens:

### ❌ Don't style desktop-first

```tsx theme={null}
import { View } from 'react-native'

// Desktop-first approach (not recommended)
<View className="w-full lg:w-1/2 md:w-3/4 sm:w-full">
  {/* Content */}
</View>
```

### ✅ Do style mobile-first

```tsx theme={null}
import { View } from 'react-native'

// Mobile-first approach (recommended)
<View className="w-full sm:w-3/4 md:w-1/2 lg:w-1/3">
  {/* Content */}
</View>
```

<Tip>
  Start with the mobile layout (no prefix), then use `sm:`, `md:`, `lg:` to progressively enhance for larger screens.
</Tip>

## Common Patterns

### Responsive Layouts

Create layouts that adapt to screen size:

```tsx theme={null}
import { View } from 'react-native'

export const ResponsiveGrid = () => (
  <View className="flex-row flex-wrap">
    {/* Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns */}
    <View className="w-full sm:w-1/2 lg:w-1/3 p-2">
      <View className="bg-blue-500 p-4 rounded">
        <Text className="text-white">Item 1</Text>
      </View>
    </View>
    <View className="w-full sm:w-1/2 lg:w-1/3 p-2">
      <View className="bg-blue-500 p-4 rounded">
        <Text className="text-white">Item 2</Text>
      </View>
    </View>
    <View className="w-full sm:w-1/2 lg:w-1/3 p-2">
      <View className="bg-blue-500 p-4 rounded">
        <Text className="text-white">Item 3</Text>
      </View>
    </View>
  </View>
)
```

### Responsive Spacing

Adjust padding and margins based on screen size:

```tsx theme={null}
import { View, Text } from 'react-native'

export const ResponsiveContainer = () => (
  <View className="px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12">
    <Text className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 sm:mb-6 lg:mb-8">
      Responsive Heading
    </Text>
    <Text className="text-base sm:text-lg">
      Content with responsive spacing
    </Text>
  </View>
)
```

### Responsive Visibility

Show or hide elements at different breakpoints:

```tsx theme={null}
import { View, Text } from 'react-native'

export const ResponsiveNav = () => (
  <View className="flex-row items-center justify-between p-4">
    {/* Always visible */}
    <Text className="text-xl font-bold">Logo</Text>

    {/* Hidden on mobile, visible on tablet and up */}
    <View className="hidden sm:flex flex-row gap-4">
      <Text>Home</Text>
      <Text>About</Text>
      <Text>Contact</Text>
    </View>

    {/* Visible on mobile, hidden on tablet and up */}
    <View className="flex sm:hidden">
      <Text>☰</Text>
    </View>
  </View>
)
```

## Custom Breakpoints

You can customize breakpoints to match your specific design needs using the `@theme` directive in your `global.css`:

```css global.css theme={null}
@import 'tailwindcss';
@import 'uniwind';

@theme {
  /* Override default breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}
```

### Adding Custom Breakpoints

You can also add entirely new breakpoints:

```css global.css theme={null}
@theme {
  /* Keep default breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Add custom breakpoints */
  --breakpoint-xs: 480px;      /* Extra small devices */
  --breakpoint-3xl: 1920px;    /* Ultra-wide screens */
  --breakpoint-tablet: 820px;  /* iPad-specific */
}
```

Usage:

```tsx theme={null}
import { View, Text } from 'react-native'

<View className="p-2 xs:p-4 tablet:p-6 3xl:p-12">
  <Text className="text-sm xs:text-base tablet:text-lg 3xl:text-2xl">
    Responsive with custom breakpoints
  </Text>
</View>
```

## Best Practices

<Tip>
  **Design mobile-first:** Start with mobile styles and progressively enhance for larger screens. This ensures a solid foundation for all devices.
</Tip>

<Tip>
  **Use semantic breakpoint names:** When adding custom breakpoints, use meaningful names like `tablet`, `desktop`, or `ultrawide` instead of arbitrary values.
</Tip>

<Warning>
  **Avoid too many breakpoints:** Stick to 3-5 breakpoints maximum. Too many breakpoints make your code harder to maintain and can lead to inconsistent designs.
</Warning>

## Related

<CardGroup cols={2}>
  <Card title="Tailwind Basics" icon="wind" href="/tailwind-basics">
    Learn the fundamentals of using Tailwind with Uniwind
  </Card>

  <Card title="Platform Selectors" icon="react" href="/api/platform-select">
    Combine breakpoints with platform-specific styles
  </Card>

  <Card title="Global CSS" icon="css" href="/theming/global-css">
    Customize breakpoints in your global.css file
  </Card>

  <Card title="Supported Class Names" icon="table" href="/class-names">
    See all supported Tailwind utilities
  </Card>
</CardGroup>

<Note>
  For more details on Tailwind's responsive design system, check the [official Tailwind documentation](https://tailwindcss.com/docs/responsive-design).
</Note>