Responsive Breakpoints

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.

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!

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)`

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.

Basic Usage

Apply different styles at different breakpoints using the breakpoint prefix:

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

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

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>

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

Common Patterns

Responsive Layouts

Create layouts that adapt to screen size:

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:

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:

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:

global.css

@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:

global.css

@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:

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

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

Use semantic breakpoint names: When adding custom breakpoints, use meaningful names like tablet, desktop, or ultrawide instead of arbitrary values.

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.

Tailwind Basics

Learn the fundamentals of using Tailwind with Uniwind

Platform Selectors

Combine breakpoints with platform-specific styles

Global CSS

Customize breakpoints in your global.css file

Supported Class Names

See all supported Tailwind utilities

For more details on Tailwind’s responsive design system, check the official Tailwind documentation.

Getting started

API

Theming

Responsive Breakpoints

Overview

Default Breakpoints

Basic Usage

Mobile-First Design

❌ Don’t style desktop-first

✅ Do style mobile-first

Common Patterns

Responsive Layouts

Responsive Spacing

Responsive Visibility

Custom Breakpoints

Adding Custom Breakpoints

Best Practices

Tailwind Basics

Platform Selectors

Global CSS

Supported Class Names

​Overview

​Default Breakpoints

​Basic Usage

​Mobile-First Design

​❌ Don’t style desktop-first

​✅ Do style mobile-first

​Common Patterns

​Responsive Layouts

​Responsive Spacing

​Responsive Visibility

​Custom Breakpoints

​Adding Custom Breakpoints

​Best Practices

​Related

Tailwind Basics

Platform Selectors

Global CSS

Supported Class Names

Overview

Default Breakpoints

Basic Usage

Mobile-First Design

❌ Don’t style desktop-first

✅ Do style mobile-first

Common Patterns

Responsive Layouts

Responsive Spacing

Responsive Visibility

Custom Breakpoints

Adding Custom Breakpoints

Best Practices

Related