GithubDocsShowcase

Overview

OverviewGoals & Non-Goals

Getting Started

InstallationTypescriptOther bundlersUsing with Monorepos

Guides

TroubleshootingHow to write custom componentsStyling Third-Party ComponentsThemesEditor Setup

Core concepts

Built on Tailwind CSSQuirksResponsive DesignDark ModeFunctions & Directives

React Native concepts

UnitsPlatform DifferencesStyle SpecificitySafe Area Insets

Customization

ConfigurationContentThemeColors

API

withNativeWindvars()useColorScheme()remapPropscssInterop

Layout

Aspect RatioBox Decoration BreakBox SizingBreak AfterBreak BeforeBreak InsideClearColumnsContainerDisplayFloatsIsolationObject FitObject PositionOverflowOverscroll BehaviorPositionTop / Right / Bottom / LeftVisibilityZ-Index

Flexbox & Grid

Align ContentAlign ItemsAlign SelfFlexFLex BasisFlex DirectionFlex GrowFlex ShrinkFlex WrapGapGrid Auto ColumnsGrid Auto FlowGrid Auto RowsGrid Column Start / EndGrid Row Start / EndGrid Template ColumnsGrid Template RowsJustify ContentJustify ItemsJustify SelfOrderPlace ItemsPlace ContentPlace Self

Spacing

MarginPaddingSpace Between

Sizing

HeightMax-HeightMax-WidthMin-HeightMin-WidthWidth

Typography

ContentFont FamilyFont SizeFont SmoothingFont StyleFont Variant NumericFont WeightHyphensLetter SpacingLine ClampLine HeightList Style ImageList Style PositionList Style TypeText TransformText ColorText DecorationText Decoration ColorText Decoration StyleText Decoration ThicknessText IndentText OverflowText AlignText Underline OffsetVertical AlignWhitespaceWord Break

Backgrounds

Background AttachmentBackground ClipBackground ColorBackground ImageBackground OriginBackground PositionBackground RepeatBackground SizeGradient Color Stops

Borders

Border ColorBorder RadiusBorder StyleBorder WidthDivide ColorDivide StyleDivide WidthOutline ColorOutline OffsetOutline StyleOutline WidthRing ColorRing Offset ColorRing Offset WidthRing Width

Effects

Background Blend ModeBox ShadowBox Shadow ColorMix Blend ModeOpacity

Transitions & Animation

AnimationTransition DelayTransition DurationTransition PropertyTransition Timing Function

Transforms

RotateScaleSkewTransform OriginTranslate

Interactivity

Accent ColorAppearanceCaret ColorCursorPointer EventsResizeScroll BehaviorScroll MarginScroll PaddingScroll Snap AlignScroll Snap StopScroll Snap TypeTouch ActionUser SelectWill Change

SVG

FillStrokeStroke Width

Accessibility

Screen Readers

Plugins

Container Queries

Content

Nativewind follows the same content rules as Tailwind CSS. Please refer to the Tailwind CSS documentation for more information and troubleshooting steps.

Configuration

Previous Page

Theme

Next Page