# Nativewind v4 Nativewind 4.2.7 is the stable release and uses Tailwind CSS v3. Use the installation and migration pages for current package versions, setup and verification requirements. Page links below return Markdown generated from the same source as the website. ## Overview - [Overview](https://www.nativewind.dev/docs.mdx): Nativewind 4.2.7 is the stable release and uses Tailwind CSS v3. ## Getting Started - [Editor Setup](https://www.nativewind.dev/docs/getting-started/editor-setup.mdx) - [Troubleshooting](https://www.nativewind.dev/docs/getting-started/troubleshooting.mdx) - [Typescript](https://www.nativewind.dev/docs/getting-started/typescript.mdx) - [Installation](https://www.nativewind.dev/docs/getting-started/installation/frameworkless.mdx) - [Installation](https://www.nativewind.dev/docs/getting-started/installation.mdx) - [Installation](https://www.nativewind.dev/docs/getting-started/installation/nextjs.mdx) ## Guides - [Writing Custom Components](https://www.nativewind.dev/docs/guides/custom-components.mdx) - [Custom Fonts](https://www.nativewind.dev/docs/guides/custom-fonts.mdx): How to load and use custom fonts with Nativewind v4 and Expo - [Other Bundlers](https://www.nativewind.dev/docs/guides/other-bundlers.mdx) - [Themes](https://www.nativewind.dev/docs/guides/themes.mdx) - [Styling Third-Party Components](https://www.nativewind.dev/docs/guides/third-party-components.mdx) - [Using with Monorepos](https://www.nativewind.dev/docs/guides/using-with-monorepos.mdx): Learn how to set up Nativewind in monorepo environments like NX ## Core Concepts - [Dark Mode](https://www.nativewind.dev/docs/core-concepts/dark-mode.mdx) - [Platform Differences](https://www.nativewind.dev/docs/core-concepts/differences.mdx) - [Functions & Directives](https://www.nativewind.dev/docs/core-concepts/functions-and-directives.mdx) - [Quirks](https://www.nativewind.dev/docs/core-concepts/quirks.mdx) - [Responsive Design](https://www.nativewind.dev/docs/core-concepts/responsive-design.mdx) - [States & Pseudo-classes](https://www.nativewind.dev/docs/core-concepts/states.mdx) - [Style Specificity](https://www.nativewind.dev/docs/core-concepts/style-specificity.mdx) - [Built on Tailwind CSS](https://www.nativewind.dev/docs/core-concepts/tailwindcss.mdx) - [Units](https://www.nativewind.dev/docs/core-concepts/units.mdx) ## Customization - [Colors](https://www.nativewind.dev/docs/customization/colors.mdx) - [Configuration](https://www.nativewind.dev/docs/customization/configuration.mdx) - [Content](https://www.nativewind.dev/docs/customization/content.mdx) - [Screens](https://www.nativewind.dev/docs/customization/screens.mdx) - [Theme](https://www.nativewind.dev/docs/customization/theme.mdx) ## API - [cssInterop](https://www.nativewind.dev/docs/api/css-interop.mdx) - [StyleSheet](https://www.nativewind.dev/docs/api/native-wind-style-sheet.mdx) - [remapProps](https://www.nativewind.dev/docs/api/remap-props.mdx) - [useColorScheme()](https://www.nativewind.dev/docs/api/use-color-scheme.mdx) - [vars() & useUnstableNativeVariable()](https://www.nativewind.dev/docs/api/vars.mdx) - [withNativeWind](https://www.nativewind.dev/docs/api/with-nativewind.mdx) ## Tailwind CSS Utilities - [Screen Readers](https://www.nativewind.dev/docs/tailwind/accessibility/screen-readers.mdx) - [Background Attachment](https://www.nativewind.dev/docs/tailwind/backgrounds/background-attachment.mdx) - [Background Clip](https://www.nativewind.dev/docs/tailwind/backgrounds/background-clip.mdx) - [Background Color](https://www.nativewind.dev/docs/tailwind/backgrounds/background-color.mdx) - [Background Image](https://www.nativewind.dev/docs/tailwind/backgrounds/background-image.mdx) - [Background Origin](https://www.nativewind.dev/docs/tailwind/backgrounds/background-origin.mdx) - [Background Position](https://www.nativewind.dev/docs/tailwind/backgrounds/background-position.mdx) - [Background Repeat](https://www.nativewind.dev/docs/tailwind/backgrounds/background-repeat.mdx) - [Background Size](https://www.nativewind.dev/docs/tailwind/backgrounds/background-size.mdx) - [Gradient Color Stops](https://www.nativewind.dev/docs/tailwind/backgrounds/gradient-color-stops.mdx) - [Border Color](https://www.nativewind.dev/docs/tailwind/borders/border-color.mdx) - [Border Radius](https://www.nativewind.dev/docs/tailwind/borders/border-radius.mdx) - [Border Style](https://www.nativewind.dev/docs/tailwind/borders/border-style.mdx) - [Border Width](https://www.nativewind.dev/docs/tailwind/borders/border-width.mdx) - [Divide Color](https://www.nativewind.dev/docs/tailwind/borders/divide-color.mdx) - [Divide Style](https://www.nativewind.dev/docs/tailwind/borders/divide-style.mdx) - [Divide Width](https://www.nativewind.dev/docs/tailwind/borders/divide-width.mdx) - [Outline Color](https://www.nativewind.dev/docs/tailwind/borders/outline-color.mdx) - [Outline Offset](https://www.nativewind.dev/docs/tailwind/borders/outline-offset.mdx) - [Outline Style](https://www.nativewind.dev/docs/tailwind/borders/outline-style.mdx) - [Outline Width](https://www.nativewind.dev/docs/tailwind/borders/outline-width.mdx) - [Ring Color](https://www.nativewind.dev/docs/tailwind/borders/ring-color.mdx) - [Ring Offset Color](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-color.mdx) - [Ring Offset Width](https://www.nativewind.dev/docs/tailwind/borders/ring-offset-width.mdx) - [Ring Width](https://www.nativewind.dev/docs/tailwind/borders/ring-width.mdx) - [Background Blend Mode](https://www.nativewind.dev/docs/tailwind/effects/background-blend-mode.mdx) - [Box Shadow Color](https://www.nativewind.dev/docs/tailwind/effects/box-shadow-color.mdx) - [Box Shadow](https://www.nativewind.dev/docs/tailwind/effects/box-shadow.mdx) - [Mix Blend Mode](https://www.nativewind.dev/docs/tailwind/effects/mix-blend-mode.mdx) - [Opacity](https://www.nativewind.dev/docs/tailwind/effects/opacity.mdx) - [Backdrop Blur](https://www.nativewind.dev/docs/tailwind/filters/backdrop-blur.mdx) - [Backdrop Brightness](https://www.nativewind.dev/docs/tailwind/filters/backdrop-brightness.mdx) - [Backdrop Contrast](https://www.nativewind.dev/docs/tailwind/filters/backdrop-contrast.mdx) - [Backdrop GrayScale](https://www.nativewind.dev/docs/tailwind/filters/backdrop-grayscale.mdx) - [Backdrop Hue Rotate](https://www.nativewind.dev/docs/tailwind/filters/backdrop-hue-rotate.mdx) - [Backdrop Invert](https://www.nativewind.dev/docs/tailwind/filters/backdrop-invert.mdx) - [Backdrop Opacity](https://www.nativewind.dev/docs/tailwind/filters/backdrop-opacity.mdx) - [Backdrop Invert](https://www.nativewind.dev/docs/tailwind/filters/backdrop-saturate.mdx) - [Backdrop Sepia](https://www.nativewind.dev/docs/tailwind/filters/backdrop-sepia.mdx) - [Blur](https://www.nativewind.dev/docs/tailwind/filters/blur.mdx) - [Brightness](https://www.nativewind.dev/docs/tailwind/filters/brightness.mdx) - [Contrast](https://www.nativewind.dev/docs/tailwind/filters/contrast.mdx) - [Drop Shadow](https://www.nativewind.dev/docs/tailwind/filters/drop-shadow.mdx) - [GrayScale](https://www.nativewind.dev/docs/tailwind/filters/grayscale.mdx) - [Hue Rotate](https://www.nativewind.dev/docs/tailwind/filters/hue-rotate.mdx) - [Invert](https://www.nativewind.dev/docs/tailwind/filters/invert.mdx) - [Invert](https://www.nativewind.dev/docs/tailwind/filters/saturate.mdx) - [Sepia](https://www.nativewind.dev/docs/tailwind/filters/sepia.mdx) - [Align Content](https://www.nativewind.dev/docs/tailwind/flexbox/align-content.mdx) - [Align Items](https://www.nativewind.dev/docs/tailwind/flexbox/align-items.mdx) - [Align Self](https://www.nativewind.dev/docs/tailwind/flexbox/align-self.mdx) - [Flex Basis](https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis.mdx) - [Flex Direction](https://www.nativewind.dev/docs/tailwind/flexbox/flex-direction.mdx) - [Flex Grow](https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow.mdx) - [Flex Shrink](https://www.nativewind.dev/docs/tailwind/flexbox/flex-shrink.mdx) - [Flex Wrap](https://www.nativewind.dev/docs/tailwind/flexbox/flex-wrap.mdx) - [Flex](https://www.nativewind.dev/docs/tailwind/flexbox/flex.mdx) - [Gap](https://www.nativewind.dev/docs/tailwind/flexbox/gap.mdx) - [Grid Auto Columns](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-columns.mdx) - [Grid Auto Flow](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-flow.mdx) - [Grid Auto Rows](https://www.nativewind.dev/docs/tailwind/flexbox/grid-auto-rows.mdx) - [Grid Column Start / End](https://www.nativewind.dev/docs/tailwind/flexbox/grid-column.mdx) - [Grid Row Start / End](https://www.nativewind.dev/docs/tailwind/flexbox/grid-row.mdx) - [Grid Template Columns](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns.mdx) - [Grid Template Rows](https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-rows.mdx) - [Justify Content](https://www.nativewind.dev/docs/tailwind/flexbox/justify-content.mdx) - [Justify Items](https://www.nativewind.dev/docs/tailwind/flexbox/justify-items.mdx) - [Justify Self](https://www.nativewind.dev/docs/tailwind/flexbox/justify-self.mdx) - [Order](https://www.nativewind.dev/docs/tailwind/flexbox/order.mdx) - [Place Items](https://www.nativewind.dev/docs/tailwind/flexbox/place-content.mdx) - [Place Content](https://www.nativewind.dev/docs/tailwind/flexbox/place-items.mdx) - [Place Self](https://www.nativewind.dev/docs/tailwind/flexbox/place-self.mdx) - [Accent Color](https://www.nativewind.dev/docs/tailwind/interactivity/accent-color.mdx) - [Appearance](https://www.nativewind.dev/docs/tailwind/interactivity/appearance.mdx) - [Caret Color](https://www.nativewind.dev/docs/tailwind/interactivity/caret-color.mdx) - [Cursor](https://www.nativewind.dev/docs/tailwind/interactivity/cursor.mdx) - [Pointer Events](https://www.nativewind.dev/docs/tailwind/interactivity/pointer-events.mdx) - [Resize](https://www.nativewind.dev/docs/tailwind/interactivity/resize.mdx) - [Scroll Behavior](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour.mdx) - [Scroll Margin](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-margin.mdx) - [Scroll Padding](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-padding.mdx) - [Scroll Snap Align](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-align.mdx) - [Scroll Snap Stop](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-stop.mdx) - [Scroll Snap Type](https://www.nativewind.dev/docs/tailwind/interactivity/scroll-snap-type.mdx) - [Touch Action](https://www.nativewind.dev/docs/tailwind/interactivity/touch-action.mdx) - [User Select](https://www.nativewind.dev/docs/tailwind/interactivity/user-select.mdx) - [Will Change](https://www.nativewind.dev/docs/tailwind/interactivity/will-change.mdx) - [Aspect Ratio](https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio.mdx) - [Box Decoration Break](https://www.nativewind.dev/docs/tailwind/layout/box-decoration-break.mdx) - [Box Sizing](https://www.nativewind.dev/docs/tailwind/layout/box-sizing.mdx) - [Break After](https://www.nativewind.dev/docs/tailwind/layout/break-after.mdx) - [Break Before](https://www.nativewind.dev/docs/tailwind/layout/break-before.mdx) - [Break Inside](https://www.nativewind.dev/docs/tailwind/layout/break-inside.mdx) - [Clear](https://www.nativewind.dev/docs/tailwind/layout/clear.mdx) - [Columns](https://www.nativewind.dev/docs/tailwind/layout/columns.mdx) - [Container](https://www.nativewind.dev/docs/tailwind/layout/container.mdx) - [Display](https://www.nativewind.dev/docs/tailwind/layout/display.mdx) - [Floats](https://www.nativewind.dev/docs/tailwind/layout/float.mdx) - [Isolation](https://www.nativewind.dev/docs/tailwind/layout/isolation.mdx) - [Object Fit](https://www.nativewind.dev/docs/tailwind/layout/object-fit.mdx) - [Object Position](https://www.nativewind.dev/docs/tailwind/layout/object-position.mdx) - [Overflow](https://www.nativewind.dev/docs/tailwind/layout/overflow.mdx) - [Overscroll Behavior](https://www.nativewind.dev/docs/tailwind/layout/overscroll-behavior.mdx) - [Position](https://www.nativewind.dev/docs/tailwind/layout/position.mdx) - [Top / Right / Bottom / Left](https://www.nativewind.dev/docs/tailwind/layout/top-right-bottom-left.mdx) - [Visibility](https://www.nativewind.dev/docs/tailwind/layout/visibility.mdx) - [Z-Index](https://www.nativewind.dev/docs/tailwind/layout/z-index.mdx) - [Safe Area Insets](https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets.mdx) - [Container Queries](https://www.nativewind.dev/docs/tailwind/plugins/container-queries.mdx) - [Height](https://www.nativewind.dev/docs/tailwind/sizing/height.mdx) - [Max-Height](https://www.nativewind.dev/docs/tailwind/sizing/max-height.mdx) - [Max-Width](https://www.nativewind.dev/docs/tailwind/sizing/max-width.mdx) - [Min-Height](https://www.nativewind.dev/docs/tailwind/sizing/min-height.mdx) - [Min-Width](https://www.nativewind.dev/docs/tailwind/sizing/min-width.mdx) - [Width](https://www.nativewind.dev/docs/tailwind/sizing/width.mdx) - [Margin](https://www.nativewind.dev/docs/tailwind/spacing/margin.mdx) - [Padding](https://www.nativewind.dev/docs/tailwind/spacing/padding.mdx) - [Space Between](https://www.nativewind.dev/docs/tailwind/spacing/space-between.mdx) - [Fill](https://www.nativewind.dev/docs/tailwind/svg/fill.mdx) - [Stroke Width](https://www.nativewind.dev/docs/tailwind/svg/stroke-width.mdx) - [Stroke](https://www.nativewind.dev/docs/tailwind/svg/stroke.mdx) - [Border Collapse](https://www.nativewind.dev/docs/tailwind/tables/border-collapse.mdx) - [Border Spacing](https://www.nativewind.dev/docs/tailwind/tables/border-spacing.mdx) - [Caption Side](https://www.nativewind.dev/docs/tailwind/tables/caption-side.mdx) - [Table Layout](https://www.nativewind.dev/docs/tailwind/tables/table-layout.mdx) - [Rotate](https://www.nativewind.dev/docs/tailwind/transforms/rotate.mdx) - [Scale](https://www.nativewind.dev/docs/tailwind/transforms/scale.mdx) - [Skew](https://www.nativewind.dev/docs/tailwind/transforms/skew.mdx) - [Transform Origin](https://www.nativewind.dev/docs/tailwind/transforms/transform-origin.mdx) - [Translate](https://www.nativewind.dev/docs/tailwind/transforms/translate.mdx) - [Animation](https://www.nativewind.dev/docs/tailwind/transitions-animation/animation.mdx) - [Transition Delay](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay.mdx) - [Transition Duration](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-duration.mdx) - [Transition Property](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-property.mdx) - [Transition Timing Function](https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-timing-function.mdx) - [Content](https://www.nativewind.dev/docs/tailwind/typography/content.mdx) - [Font Family](https://www.nativewind.dev/docs/tailwind/typography/font-family.mdx) - [Font Size](https://www.nativewind.dev/docs/tailwind/typography/font-size.mdx) - [Font Smoothing](https://www.nativewind.dev/docs/tailwind/typography/font-smoothing.mdx) - [Font Style](https://www.nativewind.dev/docs/tailwind/typography/font-style.mdx) - [Font Variant Numeric](https://www.nativewind.dev/docs/tailwind/typography/font-variant-numeric.mdx) - [Font Weight](https://www.nativewind.dev/docs/tailwind/typography/font-weight.mdx) - [Hyphens](https://www.nativewind.dev/docs/tailwind/typography/hyphens.mdx) - [Letter Spacing](https://www.nativewind.dev/docs/tailwind/typography/letter-spacing.mdx) - [Line Clamp](https://www.nativewind.dev/docs/tailwind/typography/line-clamp.mdx) - [Line Height](https://www.nativewind.dev/docs/tailwind/typography/line-height.mdx) - [List Style Image](https://www.nativewind.dev/docs/tailwind/typography/list-style-image.mdx) - [List Style Position](https://www.nativewind.dev/docs/tailwind/typography/list-style-position.mdx) - [List Style Type](https://www.nativewind.dev/docs/tailwind/typography/list-style-type.mdx) - [Text Transform](https://www.nativewind.dev/docs/tailwind/typography/text-align.mdx) - [Text Color](https://www.nativewind.dev/docs/tailwind/typography/text-color.mdx) - [Text Decoration Color](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-color.mdx) - [Text Decoration Style](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style.mdx) - [Text Decoration Thickness](https://www.nativewind.dev/docs/tailwind/typography/text-decoration-thickness.mdx) - [Text Decoration](https://www.nativewind.dev/docs/tailwind/typography/text-decoration.mdx) - [Text Indent](https://www.nativewind.dev/docs/tailwind/typography/text-indent.mdx) - [Text Overflow](https://www.nativewind.dev/docs/tailwind/typography/text-overflow.mdx) - [Text Align](https://www.nativewind.dev/docs/tailwind/typography/text-transform.mdx) - [Text Underline Offset](https://www.nativewind.dev/docs/tailwind/typography/text-underline-offset.mdx) - [Vertical Align](https://www.nativewind.dev/docs/tailwind/typography/vertical-align.mdx) - [Whitespace](https://www.nativewind.dev/docs/tailwind/typography/whitespace.mdx) - [Word Break](https://www.nativewind.dev/docs/tailwind/typography/word-break.mdx) ## Optional - [Full documentation](https://www.nativewind.dev/llms-full.txt): All public pages in one file