# NativeWind v4

> NativeWind uses Tailwind CSS as a scripting language to create a universal style system for React Native. It compiles Tailwind CSS styles into native StyleSheet objects at build time while providing an efficient runtime for conditional styles like hover, focus, media queries, and container queries.

## Overview

- [Overview](https://nativewind.dev/docs)

## Getting Started

- [Editor Setup](https://nativewind.dev/docs/getting-started/editor-setup)
- [Troubleshooting](https://nativewind.dev/docs/getting-started/troubleshooting)
- [Typescript](https://nativewind.dev/docs/getting-started/typescript)
- [Additional Setup Guides](https://nativewind.dev/docs/getting-started/installation/_additional-guides)
- [Import CSS](https://nativewind.dev/docs/getting-started/installation/_import-css)
- [_install helper](https://nativewind.dev/docs/getting-started/installation/_install)
- [_npm helper](https://nativewind.dev/docs/getting-started/installation/_npm)
- [_rn-new command helper](https://nativewind.dev/docs/getting-started/installation/_rn-new-command)
- [_tailwind helper](https://nativewind.dev/docs/getting-started/installation/_tailwind)
- [Try it out](https://nativewind.dev/docs/getting-started/installation/_try-it-out)
- [TypeScript Setup](https://nativewind.dev/docs/getting-started/installation/_typescript)
- [Installation](https://nativewind.dev/docs/getting-started/installation/frameworkless)
- [Installation](https://nativewind.dev/docs/getting-started/installation)
- [Installation](https://nativewind.dev/docs/getting-started/installation/nextjs)

## Guides

- [Writing Custom Components](https://nativewind.dev/docs/guides/custom-components)
- [Other Bundlers](https://nativewind.dev/docs/guides/other-bundlers)
- [Themes](https://nativewind.dev/docs/guides/themes)
- [Styling Third-Party Components](https://nativewind.dev/docs/guides/third-party-components)
- [Using with Monorepos](https://nativewind.dev/docs/guides/using-with-monorepos): Learn how to set up Nativewind in monorepo environments like NX

## Core Concepts

- [Dark Mode](https://nativewind.dev/docs/core-concepts/dark-mode)
- [Platform Differences](https://nativewind.dev/docs/core-concepts/differences)
- [Functions & Directives](https://nativewind.dev/docs/core-concepts/functions-and-directives)
- [Quirks](https://nativewind.dev/docs/core-concepts/quirks)
- [Responsive Design](https://nativewind.dev/docs/core-concepts/responsive-design)
- [States & Pseudo-classes](https://nativewind.dev/docs/core-concepts/states)
- [Style Specificity](https://nativewind.dev/docs/core-concepts/style-specificity)
- [Built on Tailwind CSS](https://nativewind.dev/docs/core-concepts/tailwindcss)
- [Units](https://nativewind.dev/docs/core-concepts/units)

## Customization

- [Colors](https://nativewind.dev/docs/customization/colors)
- [Configuration](https://nativewind.dev/docs/customization/configuration)
- [Content](https://nativewind.dev/docs/customization/content)
- [Screens](https://nativewind.dev/docs/customization/screens)
- [Theme](https://nativewind.dev/docs/customization/theme)

## API

- [cssInterop](https://nativewind.dev/docs/api/css-interop)
- [StyleSheet](https://nativewind.dev/docs/api/native-wind-style-sheet)
- [remapProps](https://nativewind.dev/docs/api/remap-props)
- [useColorScheme()](https://nativewind.dev/docs/api/use-color-scheme)
- [vars() & useUnstableNativeVariable()](https://nativewind.dev/docs/api/vars)
- [withNativeWind](https://nativewind.dev/docs/api/with-nativewind)

## Tailwind CSS Utilities

- [Compatibility with Comments](https://nativewind.dev/docs/tailwind/_compatibility-with-comments)
- [_compatibility.mdx](https://nativewind.dev/docs/tailwind/_compatibility)
- [_legend.mdx](https://nativewind.dev/docs/tailwind/_legend)
- [_rn-svg helper](https://nativewind.dev/docs/tailwind/_rn-svg)
- [_tw-docs.mdx](https://nativewind.dev/docs/tailwind/_tw-docs)
- [Screen Readers](https://nativewind.dev/docs/tailwind/accessibility/screen-readers)
- [Background Attachment](https://nativewind.dev/docs/tailwind/backgrounds/background-attachment)
- [Background Clip](https://nativewind.dev/docs/tailwind/backgrounds/background-clip)
- [Background Color](https://nativewind.dev/docs/tailwind/backgrounds/background-color)
- [Background Image](https://nativewind.dev/docs/tailwind/backgrounds/background-image)
- [Background Origin](https://nativewind.dev/docs/tailwind/backgrounds/background-origin)
- [Background Position](https://nativewind.dev/docs/tailwind/backgrounds/background-position)
- [Background Repeat](https://nativewind.dev/docs/tailwind/backgrounds/background-repeat)
- [Background Size](https://nativewind.dev/docs/tailwind/backgrounds/background-size)
- [Gradient Color Stops](https://nativewind.dev/docs/tailwind/backgrounds/gradient-color-stops)
- [Border Color](https://nativewind.dev/docs/tailwind/borders/border-color)
- [Border Radius](https://nativewind.dev/docs/tailwind/borders/border-radius)
- [Border Style](https://nativewind.dev/docs/tailwind/borders/border-style)
- [Border Width](https://nativewind.dev/docs/tailwind/borders/border-width)
- [Divide Color](https://nativewind.dev/docs/tailwind/borders/divide-color)
- [Divide Style](https://nativewind.dev/docs/tailwind/borders/divide-style)
- [Divide Width](https://nativewind.dev/docs/tailwind/borders/divide-width)
- [Outline Color](https://nativewind.dev/docs/tailwind/borders/outline-color)
- [Outline Offset](https://nativewind.dev/docs/tailwind/borders/outline-offset)
- [Outline Style](https://nativewind.dev/docs/tailwind/borders/outline-style)
- [Outline Width](https://nativewind.dev/docs/tailwind/borders/outline-width)
- [Ring Color](https://nativewind.dev/docs/tailwind/borders/ring-color)
- [Ring Offset Color](https://nativewind.dev/docs/tailwind/borders/ring-offset-color)
- [Ring Offset Width](https://nativewind.dev/docs/tailwind/borders/ring-offset-width)
- [Ring Width](https://nativewind.dev/docs/tailwind/borders/ring-width)
- [Background Blend Mode](https://nativewind.dev/docs/tailwind/effects/background-blend-mode)
- [Box Shadow Color](https://nativewind.dev/docs/tailwind/effects/box-shadow-color)
- [Box Shadow](https://nativewind.dev/docs/tailwind/effects/box-shadow)
- [Mix Blend Mode](https://nativewind.dev/docs/tailwind/effects/mix-blend-mode)
- [Opacity](https://nativewind.dev/docs/tailwind/effects/opacity)
- [Backdrop Blur](https://nativewind.dev/docs/tailwind/filters/backdrop-blur)
- [Backdrop Brightness](https://nativewind.dev/docs/tailwind/filters/backdrop-brightness)
- [Backdrop Contrast](https://nativewind.dev/docs/tailwind/filters/backdrop-contrast)
- [Backdrop GrayScale](https://nativewind.dev/docs/tailwind/filters/backdrop-grayscale)
- [Backdrop Hue Rotate](https://nativewind.dev/docs/tailwind/filters/backdrop-hue-rotate)
- [Backdrop Invert](https://nativewind.dev/docs/tailwind/filters/backdrop-invert)
- [Backdrop Opacity](https://nativewind.dev/docs/tailwind/filters/backdrop-opacity)
- [Backdrop Invert](https://nativewind.dev/docs/tailwind/filters/backdrop-saturate)
- [Backdrop Sepia](https://nativewind.dev/docs/tailwind/filters/backdrop-sepia)
- [Blur](https://nativewind.dev/docs/tailwind/filters/blur)
- [Brightness](https://nativewind.dev/docs/tailwind/filters/brightness)
- [Contrast](https://nativewind.dev/docs/tailwind/filters/contrast)
- [Drop Shadow](https://nativewind.dev/docs/tailwind/filters/drop-shadow)
- [GrayScale](https://nativewind.dev/docs/tailwind/filters/grayscale)
- [Hue Rotate](https://nativewind.dev/docs/tailwind/filters/hue-rotate)
- [Invert](https://nativewind.dev/docs/tailwind/filters/invert)
- [Invert](https://nativewind.dev/docs/tailwind/filters/saturate)
- [Sepia](https://nativewind.dev/docs/tailwind/filters/sepia)
- [Align Content](https://nativewind.dev/docs/tailwind/flexbox/align-content)
- [Align Items](https://nativewind.dev/docs/tailwind/flexbox/align-items)
- [Align Self](https://nativewind.dev/docs/tailwind/flexbox/align-self)
- [Flex Basis](https://nativewind.dev/docs/tailwind/flexbox/flex-basis)
- [Flex Direction](https://nativewind.dev/docs/tailwind/flexbox/flex-direction)
- [Flex Grow](https://nativewind.dev/docs/tailwind/flexbox/flex-grow)
- [Flex Shrink](https://nativewind.dev/docs/tailwind/flexbox/flex-shrink)
- [Flex Wrap](https://nativewind.dev/docs/tailwind/flexbox/flex-wrap)
- [Flex](https://nativewind.dev/docs/tailwind/flexbox/flex)
- [Gap](https://nativewind.dev/docs/tailwind/flexbox/gap)
- [Grid Auto Columns](https://nativewind.dev/docs/tailwind/flexbox/grid-auto-columns)
- [Grid Auto Flow](https://nativewind.dev/docs/tailwind/flexbox/grid-auto-flow)
- [Grid Auto Rows](https://nativewind.dev/docs/tailwind/flexbox/grid-auto-rows)
- [Grid Column Start / End](https://nativewind.dev/docs/tailwind/flexbox/grid-column)
- [Grid Row Start / End](https://nativewind.dev/docs/tailwind/flexbox/grid-row)
- [Grid Template Columns](https://nativewind.dev/docs/tailwind/flexbox/grid-template-columns)
- [Grid Template Rows](https://nativewind.dev/docs/tailwind/flexbox/grid-template-rows)
- [Justify Content](https://nativewind.dev/docs/tailwind/flexbox/justify-content)
- [Justify Items](https://nativewind.dev/docs/tailwind/flexbox/justify-items)
- [Justify Self](https://nativewind.dev/docs/tailwind/flexbox/justify-self)
- [Order](https://nativewind.dev/docs/tailwind/flexbox/order)
- [Place Items](https://nativewind.dev/docs/tailwind/flexbox/place-content)
- [Place Content](https://nativewind.dev/docs/tailwind/flexbox/place-items)
- [Place Self](https://nativewind.dev/docs/tailwind/flexbox/place-self)
- [Accent Color](https://nativewind.dev/docs/tailwind/interactivity/accent-color)
- [Appearance](https://nativewind.dev/docs/tailwind/interactivity/appearance)
- [Caret Color](https://nativewind.dev/docs/tailwind/interactivity/caret-color)
- [Cursor](https://nativewind.dev/docs/tailwind/interactivity/cursor)
- [Pointer Events](https://nativewind.dev/docs/tailwind/interactivity/pointer-events)
- [Resize](https://nativewind.dev/docs/tailwind/interactivity/resize)
- [Scroll Behavior](https://nativewind.dev/docs/tailwind/interactivity/scroll-behaviour)
- [Scroll Margin](https://nativewind.dev/docs/tailwind/interactivity/scroll-margin)
- [Scroll Padding](https://nativewind.dev/docs/tailwind/interactivity/scroll-padding)
- [Scroll Snap Align](https://nativewind.dev/docs/tailwind/interactivity/scroll-snap-align)
- [Scroll Snap Stop](https://nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop)
- [Scroll Snap Type](https://nativewind.dev/docs/tailwind/interactivity/scroll-snap-type)
- [Touch Action](https://nativewind.dev/docs/tailwind/interactivity/touch-action)
- [User Select](https://nativewind.dev/docs/tailwind/interactivity/user-select)
- [Will Change](https://nativewind.dev/docs/tailwind/interactivity/will-change)
- [Aspect Ratio](https://nativewind.dev/docs/tailwind/layout/aspect-ratio)
- [Box Decoration Break](https://nativewind.dev/docs/tailwind/layout/box-decoration-break)
- [Box Sizing](https://nativewind.dev/docs/tailwind/layout/box-sizing)
- [Break After](https://nativewind.dev/docs/tailwind/layout/break-after)
- [Break Before](https://nativewind.dev/docs/tailwind/layout/break-before)
- [Break Inside](https://nativewind.dev/docs/tailwind/layout/break-inside)
- [Clear](https://nativewind.dev/docs/tailwind/layout/clear)
- [Columns](https://nativewind.dev/docs/tailwind/layout/columns)
- [Container](https://nativewind.dev/docs/tailwind/layout/container)
- [Display](https://nativewind.dev/docs/tailwind/layout/display)
- [Floats](https://nativewind.dev/docs/tailwind/layout/float)
- [Isolation](https://nativewind.dev/docs/tailwind/layout/isolation)
- [Object Fit](https://nativewind.dev/docs/tailwind/layout/object-fit)
- [Object Position](https://nativewind.dev/docs/tailwind/layout/object-position)
- [Overflow](https://nativewind.dev/docs/tailwind/layout/overflow)
- [Overscroll Behavior](https://nativewind.dev/docs/tailwind/layout/overscroll-behavior)
- [Position](https://nativewind.dev/docs/tailwind/layout/position)
- [Top / Right / Bottom / Left](https://nativewind.dev/docs/tailwind/layout/top-right-bottom-left)
- [Visibility](https://nativewind.dev/docs/tailwind/layout/visibility)
- [Z-Index](https://nativewind.dev/docs/tailwind/layout/z-index)
- [Safe Area Insets](https://nativewind.dev/docs/tailwind/new-concepts/safe-area-insets)
- [Container Queries](https://nativewind.dev/docs/tailwind/plugins/container-queries)
- [Height](https://nativewind.dev/docs/tailwind/sizing/height)
- [Max-Height](https://nativewind.dev/docs/tailwind/sizing/max-height)
- [Max-Width](https://nativewind.dev/docs/tailwind/sizing/max-width)
- [Min-Height](https://nativewind.dev/docs/tailwind/sizing/min-height)
- [Min-Width](https://nativewind.dev/docs/tailwind/sizing/min-width)
- [Width](https://nativewind.dev/docs/tailwind/sizing/width)
- [Margin](https://nativewind.dev/docs/tailwind/spacing/margin)
- [Padding](https://nativewind.dev/docs/tailwind/spacing/padding)
- [Space Between](https://nativewind.dev/docs/tailwind/spacing/space-between)
- [Fill](https://nativewind.dev/docs/tailwind/svg/fill)
- [Stroke Width](https://nativewind.dev/docs/tailwind/svg/stroke-width)
- [Stroke](https://nativewind.dev/docs/tailwind/svg/stroke)
- [Border Collapse](https://nativewind.dev/docs/tailwind/tables/border-collapse)
- [Border Spacing](https://nativewind.dev/docs/tailwind/tables/border-spacing)
- [Caption Side](https://nativewind.dev/docs/tailwind/tables/caption-side)
- [Table Layout](https://nativewind.dev/docs/tailwind/tables/table-layout)
- [Rotate](https://nativewind.dev/docs/tailwind/transforms/rotate)
- [Scale](https://nativewind.dev/docs/tailwind/transforms/scale)
- [Skew](https://nativewind.dev/docs/tailwind/transforms/skew)
- [Transform Origin](https://nativewind.dev/docs/tailwind/transforms/transform-origin)
- [Translate](https://nativewind.dev/docs/tailwind/transforms/translate)
- [Animation](https://nativewind.dev/docs/tailwind/transitions-animation/animation)
- [Transition Delay](https://nativewind.dev/docs/tailwind/transitions-animation/transition-delay)
- [Transition Duration](https://nativewind.dev/docs/tailwind/transitions-animation/transition-duration)
- [Transition Property](https://nativewind.dev/docs/tailwind/transitions-animation/transition-property)
- [Transition Timing Function](https://nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function)
- [Content](https://nativewind.dev/docs/tailwind/typography/content)
- [Font Family](https://nativewind.dev/docs/tailwind/typography/font-family)
- [Font Size](https://nativewind.dev/docs/tailwind/typography/font-size)
- [Font Smoothing](https://nativewind.dev/docs/tailwind/typography/font-smoothing)
- [Font Style](https://nativewind.dev/docs/tailwind/typography/font-style)
- [Font Variant Numeric](https://nativewind.dev/docs/tailwind/typography/font-variant-numeric)
- [Font Weight](https://nativewind.dev/docs/tailwind/typography/font-weight)
- [Hyphens](https://nativewind.dev/docs/tailwind/typography/hyphens)
- [Letter Spacing](https://nativewind.dev/docs/tailwind/typography/letter-spacing)
- [Line Clamp](https://nativewind.dev/docs/tailwind/typography/line-clamp)
- [Line Height](https://nativewind.dev/docs/tailwind/typography/line-height)
- [List Style Image](https://nativewind.dev/docs/tailwind/typography/list-style-image)
- [List Style Position](https://nativewind.dev/docs/tailwind/typography/list-style-position)
- [List Style Type](https://nativewind.dev/docs/tailwind/typography/list-style-type)
- [Text Transform](https://nativewind.dev/docs/tailwind/typography/text-align)
- [Text Color](https://nativewind.dev/docs/tailwind/typography/text-color)
- [Text Decoration Color](https://nativewind.dev/docs/tailwind/typography/text-decoration-color)
- [Text Decoration Style](https://nativewind.dev/docs/tailwind/typography/text-decoration-style)
- [Text Decoration Thickness](https://nativewind.dev/docs/tailwind/typography/text-decoration-thickness)
- [Text Decoration](https://nativewind.dev/docs/tailwind/typography/text-decoration)
- [Text Indent](https://nativewind.dev/docs/tailwind/typography/text-indent)
- [Text Overflow](https://nativewind.dev/docs/tailwind/typography/text-overflow)
- [Text Align](https://nativewind.dev/docs/tailwind/typography/text-transform)
- [Text Underline Offset](https://nativewind.dev/docs/tailwind/typography/text-underline-offset)
- [Vertical Align](https://nativewind.dev/docs/tailwind/typography/vertical-align)
- [Whitespace](https://nativewind.dev/docs/tailwind/typography/whitespace)
- [Word Break](https://nativewind.dev/docs/tailwind/typography/word-break)

## Optional

- [Full documentation](https://nativewind.dev/llms-full.txt): Complete NativeWind v4 documentation in a single file for LLM consumption