Github Blog Showcase

Overview

Overview Goals & Non-Goals

Getting Started

Installation Typescript Other bundlers Using with Monorepos

Guides

Troubleshooting How to write custom components Styling Third-Party Components Themes Editor Setup

Core concepts

Built on Tailwind CSS Quirks Responsive Design Dark Mode Functions & Directives

React Native concepts

Units Platform Differences Style Specificity Safe Area Insets

Customization

Configuration Content Theme Colors

API

withNativeWind vars()useColorScheme()remapProps cssInterop

Layout

Aspect Ratio Box Decoration Break Box Sizing Break After Break Before Break Inside Clear Columns Container Display Floats Isolation Object Fit Object Position Overflow Overscroll Behavior Position Top / Right / Bottom / Left Visibility Z-Index

Flexbox & Grid

Align Content Align Items Align Self Flex Flex Basis Flex Direction Flex Grow Flex Shrink Flex Wrap Gap Grid Auto Columns Grid Auto Flow Grid Auto Rows Grid Column Start / End Grid Row Start / End Grid Template Columns Grid Template Rows Justify Content Justify Items Justify Self Order Place Items Place Content Place Self

Spacing

Margin Padding Space Between

Sizing

Height Max-Height Max-Width Min-Height Min-Width Width

Typography

Content Font Family Font Size Font Smoothing Font Style Font Variant Numeric Font Weight Hyphens Letter Spacing Line Clamp Line Height List Style Image List Style Position List Style Type Text Transform Text Color Text Decoration Text Decoration Color Text Decoration Style Text Decoration Thickness Text Indent Text Overflow Text Align Text Underline Offset Vertical Align Whitespace Word Break

Backgrounds

Background Attachment Background Clip Background Color Background Image Background Origin Background Position Background Repeat Background Size Gradient Color Stops

Borders

Border Color Border Radius Border Style Border Width Divide Color Divide Style Divide Width Outline Color Outline Offset Outline Style Outline Width Ring Color Ring Offset Color Ring Offset Width Ring Width

Effects

Background Blend Mode Box Shadow Box Shadow Color Mix Blend Mode Opacity

Transitions & Animation

Animation Transition Delay Transition Duration Transition Property Transition Timing Function

Transforms

Rotate Scale Skew Transform Origin Translate

Interactivity

Accent Color Appearance Caret Color Cursor Pointer Events Resize Scroll Behavior Scroll Margin Scroll Padding Scroll Snap Align Scroll Snap Stop Scroll Snap Type Touch Action User Select Will Change

SVG

Fill Stroke Stroke Width

Accessibility

Plugins

Container Queries

Responsive Design

CAUTION

Nativewind's default theme is not yet designed for native devices and still uses breakpoints that were mostly designed for web.

Nativewind's responsive design works identically to Tailwind CSS, please refer to the official Tailwind CSS docs for more information.

Quirks

Previous Page

Dark Mode

Next Page