### Place Content Start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-content

Use `place-content-start` to align content to the start of a flex container. This utility is only supported on the web.

```html
place-content-start
```

--------------------------------

### Ring Width Class Example

Source: https://www.nativewind.dev/v5/tailwind/borders/ring-width

This example shows a ring width class that supports values from the theme.

```html
ring-{n}
```

--------------------------------

### Transition Duration Class Example

Source: https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-duration

This example shows the syntax for the duration-{n} class, which supports values defined in the theme.

```html
duration-{n}
```

--------------------------------

### Place Self Start Utility

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-self

Use `place-self-start` to align a flex or grid item to the start of its container along the cross axis. This utility is only supported on the web.

```html
place-self-start
```

--------------------------------

### Place Items Start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-items

Use `place-items-start` to align items to the start of the cross axis in a flex container. This class is only supported on the web.

```html
place-items-start
```

--------------------------------

### Align Items Start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/align-items

Use `items-start` to align flex items to the start of the cross axis.

```html
items-start
```

--------------------------------

### Install NativeWind with Bun

Source: https://www.nativewind.dev/v5/llms-full.txt

Installs NativeWind and its peer dependencies using Bun. This command is for projects managed with the Bun runtime.

```bash
bun install nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context
```

--------------------------------

### Arbitrary Transition Duration Class Example

Source: https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-duration

This example shows the syntax for the duration-[n] class, which supports arbitrary duration values.

```html
duration-[n]
```

--------------------------------

### Install NativeWind with npm

Source: https://www.nativewind.dev/v5/llms-full.txt

Use this command to install NativeWind and its peer dependencies using npm. Ensure you have react-native-css, react-native-reanimated, and react-native-safe-area-context installed.

```bash
npm install nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context
```

--------------------------------

### Install NativeWind with pnpm

Source: https://www.nativewind.dev/v5/llms-full.txt

Installs NativeWind and its peer dependencies using pnpm. Use this command if your project utilizes pnpm for package management.

```bash
pnpm install nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context
```

--------------------------------

### Grid Row Start Class

Source: https://www.nativewind.dev/v5/tailwind/flexbox/grid-row

Use `row-start-{n}` to specify the starting grid line for an element's row. This utility is only supported on the web.

```html
row-start-{n}
```

--------------------------------

### Install @expo/metro-config

Source: https://www.nativewind.dev/v5/llms-full.txt

Install the necessary package for framework-less React Native projects. This command adds the required dependency to your project.

```bash
npm install @expo/metro-config
```

--------------------------------

### Install NativeWind and Peer Dependencies

Source: https://www.nativewind.dev/v5/getting-started/installation

Install nativewind and its required peer dependencies for your Expo project.

```bash
npx expo install nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context
```

--------------------------------

### Justify Items Start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/justify-items

Use `justify-items-start` to align grid items to the start of their grid area. This class is web-only.

```html
justify-items-start
```

--------------------------------

### Install NativeWind with Yarn

Source: https://www.nativewind.dev/v5/llms-full.txt

Installs NativeWind and its peer dependencies using Yarn. This command is suitable for projects managed with Yarn.

```bash
yarn add nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context
```

--------------------------------

### Install Tailwind CSS for Expo

Source: https://www.nativewind.dev/v5/getting-started/installation

Install Tailwind CSS and its necessary PostCSS packages as development dependencies.

```bash
npx expo install --dev tailwindcss @tailwindcss/postcss postcss
```

--------------------------------

### Enable Nativewind Debug Mode

Source: https://www.nativewind.dev/v5/getting-started/troubleshooting

Run your project's start command with the DEBUG=nativewind environment variable set to enable detailed debug output. This is useful for reporting issues.

```bash
DEBUG=nativewind <start-command>
```

--------------------------------

### Verify Nativewind Installation in a React Component

Source: https://www.nativewind.dev/v5/getting-started/troubleshooting

Import and run the `verifyInstallation()` utility function within a React component to confirm Nativewind is correctly installed. Do not invoke this function on the global scope.

```javascript
import React from 'react';
import { verifyInstallation } from 'nativewind';
 
function App() {
    // Ensure to call inside a component, not globally
    verifyInstallation();
 
    return (
      // Your component JSX here...
    );
}
 
export default App;
```

--------------------------------

### col-start-{n} Class

Source: https://www.nativewind.dev/v5/tailwind/flexbox/grid-column

Use the `col-start-{n}` class to define the starting column line for an element. This utility is only supported on the web.

```html
col-start-{n}
```

--------------------------------

### Install expo-font

Source: https://www.nativewind.dev/v5/guides/custom-fonts

Install the expo-font package to enable font loading in your Expo project.

```bash
bun add expo-font
```

--------------------------------

### Basic Nativewind Component Test

Source: https://www.nativewind.dev/v5/getting-started/installation

Create a simple React Native component to verify your Nativewind installation. This example demonstrates using className with Tailwind utility classes for styling.

```tsx
import "./global.css"
import { Text, View } from "react-native";

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}
```

--------------------------------

### Min-Width Class Examples

Source: https://www.nativewind.dev/v5/tailwind/sizing/min-width

Demonstrates various min-width utility classes supported by Tailwind CSS, including theme-based, arbitrary, and keyword values.

```html
min-w-{n}
```

```html
min-w-[n]
```

```html
min-w-full
```

```html
min-w-min
```

```html
min-w-max
```

```html
min-w-fit
```

--------------------------------

### Dynamic Styling with Conditional Logic

Source: https://www.nativewind.dev/v5

This example illustrates how to dynamically apply styles based on component props using conditional logic and building up a `className` string.

```javascript
import { Text } from "react-native";

export function MyText({ bold, italic, lineThrough, ...props }) {
  const classNames = [];

  if (bold) classNames.push("font-bold");
  if (italic) classNames.push("italic");
  if (lineThrough) classNames.push("line-through");

  return <Text className={classNames.join(" ")} {...props} />;
}
```

--------------------------------

### Dynamic Mapping Modifier Example

Source: https://www.nativewind.dev/v5/guides/third-party-components

Illustrates the dynamic mapping modifier syntax for moving style properties. This example shows how to map a nested prop to a specific style property.

```javascript
//This class
{}-[screenOptions.tabBarTintColor]/color:color-red-500
// Will output
{ screenOptions: { tabBarTintColor: 'color-red-500' } }
```

--------------------------------

### Enable Nativewind Debug Mode (Windows)

Source: https://www.nativewind.dev/v5/llms-full.txt

Use this command in your project's root directory to enable debug logging for Nativewind on Windows. Replace `<start-command>` with your project's specific start command (e.g., `npm run dev`).

```cmd
set "DEBUG=nativewind" && <start-command>
```

--------------------------------

### justify-start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/justify-content

Aligns flex items to the start of the main axis. Full support.

```html
justify-start
```

--------------------------------

### Create a Custom Component with Variants

Source: https://www.nativewind.dev/v5/llms-full.txt

Implement a custom component that supports different visual variants based on props. This example uses a style mapping to apply specific class names for each variant.

```tsx
const variantStyles = {
  default: "rounded",
  primary: "bg-blue-500 text-white",
  secondary: "bg-white-500 text-black",
};

function MyComponent({ variant, className, ...props }) {
  return (
    <Text
      className={
        `
        ${variantStyles.default}
        ${variantStyles[variant]}
        ${className}
      `
      }
      {...props }
    />
  );
}
```

--------------------------------

### Capture Nativewind Debug Output to File (Windows - Older Versions)

Source: https://www.nativewind.dev/v5/llms-full.txt

On older Windows versions, redirect Nativewind debug output to `output.log` using `> output.log 2>output.log` after your start command.

```cmd
set "DEBUG=nativewind" && <start-command> > output.log 2>output.log
```

--------------------------------

### justify-self-start

Source: https://www.nativewind.dev/v5/tailwind/flexbox/justify-self

Aligns the item to the start of its container along the cross axis.

```html
justify-self-start
```

--------------------------------

### Clear Cache for Framework-less React Native

Source: https://www.nativewind.dev/v5/getting-started/troubleshooting

Start your framework-less React Native application with a reset cache to troubleshoot.

```bash
npx react-native start --reset-cache
```

--------------------------------

### Update Dependencies with Expo CLI

Source: https://www.nativewind.dev/v5/guides/migrate-from-v4

Install the new versions of Nativewind and related packages using Expo CLI.

```bash
npx expo install nativewind@preview react-native-css@latest react-native-reanimated react-native-safe-area-context

# Install Tailwind CSS v4 and PostCSS as dev dependencies
npx expo install --dev tailwindcss @tailwindcss/postcss postcss
```

--------------------------------

### Combine Multiple Pseudo-classes

Source: https://www.nativewind.dev/v5/core-concepts/states

Multiple pseudo-classes can be combined. All specified conditions must be met for the styles to apply. This example shows combining hover, active, and focus states.

```javascript
<TextInput className="hover:active:focus:border-blue-500" />
```

--------------------------------

### Initialize New Expo Project with NativeWind

Source: https://www.nativewind.dev/v5/getting-started/installation

Use this command to quickly set up a new Expo project with NativeWind v5, Expo SDK 54, and Tailwind CSS.

```bash
npx rn-new@next --nativewind
```

--------------------------------

### Flex-Initial Utility

Source: https://www.nativewind.dev/v5/tailwind/flexbox/flex

This class provides full support for flex-initial functionality.

```html
flex-initial
```

--------------------------------

### Interoperability with SVG Components using cssInterop

Source: https://www.nativewind.dev/v5

This example shows how to use `cssInterop` to map `className` to native style props (`height`, `width`, `fill`, `stroke`, `strokeWidth`) for SVG components, allowing them to be styled with Tailwind CSS classes.

```javascript
import { Text } from "react-native";
import { cssInterop } from "nativewind";
import { Svg, Circle } from "react-native-svg";

/**
 * Svg uses `height`/`width` props on native and className on web
 */
const StyledSVG = cssInterop(Svg, {
  className: {
    target: "style",
    nativeStyleToProp: {
      height: true,
      width: true,
    },
  },
});
/**
 * Circle uses `fill`/`stroke`/`strokeWidth` props on native and className on web
 */
const StyledCircle = cssInterop(Circle, {
  className: {
    target: "style",
    nativeStyleToProp: {
      fill: true,
      stroke: true,
      strokeWidth: true,
    },
  },
});

export function BoldText(props) {
  return (
    <Svg className="w-1/2 h-1/2" viewBox="0 0 100 100">
      <StyledCircle
        className="fill-green-500 stroke-blue-500 stroke-2"
        cx="50"
        cy="50"
        r="45"
      />
    </Svg>
  );
}
```

--------------------------------

### Create PostCSS Configuration

Source: https://www.nativewind.dev/v5/guides/migrate-from-v4

Create a postcss.config.mjs file in your project root to configure PostCSS.

```javascript
// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
```

--------------------------------

### Basic Columns Utility

Source: https://www.nativewind.dev/v5/tailwind/layout/columns

Use the `columns-{n}` utility to create a multi-column layout with a predefined number of columns. This is supported on web only.

```html
columns-{n}
```

--------------------------------

### Cursor Help

Source: https://www.nativewind.dev/v5/tailwind/interactivity/cursor

Use the `cursor-help` class to indicate that help is available.

```html
cursor-help
```

--------------------------------

### Inset Utilities

Source: https://www.nativewind.dev/v5/tailwind/layout/top-right-bottom-left

Use these classes to set all four 'top', 'right', 'bottom', and 'left' properties simultaneously. Supports theme values, arbitrary values, and 'auto'.

```html
inset-{n}
inset-[n]
inset-auto
```

--------------------------------

### Clear Cache for Expo

Source: https://www.nativewind.dev/v5/getting-started/troubleshooting

Start your Expo application without the cache to resolve potential issues.

```bash
npx expo start --clear
```

--------------------------------

### Inset X Utilities

Source: https://www.nativewind.dev/v5/tailwind/layout/top-right-bottom-left

Use these classes to set the 'left' and 'right' properties simultaneously. Supports theme values, arbitrary values, and 'auto'.

```html
inset-x-{n}
inset-x-[n]
inset-x-auto
```

--------------------------------

### Gradient Color Stop Classes

Source: https://www.nativewind.dev/v5/tailwind/backgrounds/gradient-color-stops

These classes are used to define the start, middle, and end points of a gradient. They are only supported on the web.

```html
from-{color}
```

```html
via-{color}
```

```html
to-{color}
```

--------------------------------

### Create a Component with Default Styles

Source: https://www.nativewind.dev/v5/guides/custom-components

Define a component with predefined styles that can be extended by passing additional class names.

```javascript
function MyComponent({ className }) {
  const defaultStyles = "text-black dark:text-white";
  return <Text className={`${defaultStyles} ${className}`} />;
}

<MyComponent className="font-bold" />;
```

--------------------------------

### justify-between

Source: https://www.nativewind.dev/v5/tailwind/flexbox/justify-content

Distributes flex items evenly with the first item at the start and the last item at the end of the main axis. Full support.

```html
justify-between
```

--------------------------------

### Static Positioning

Source: https://www.nativewind.dev/v5/tailwind/layout/position

Use the `static` class for static positioning. This is fully supported on native platforms.

```html
static
```

--------------------------------

### Flow-Root Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `flow-root` class for web-only flow-root display.

```html
flow-root
```

--------------------------------

### Scroll Snap Align

Source: https://www.nativewind.dev/v5/llms.txt

Align snap points to the start, center, or end of the scroll container. Use 'snap-align-start', 'snap-align-center', 'snap-align-end'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="h-48 w-full overflow-x-scroll snap-x snap-x-mandatory">
    <View className="w-full h-full flex-none snap-align-center">
      Item 1
    </View>
    <View className="w-full h-full flex-none snap-align-center">
      Item 2
    </View>
  </View>
);

export default App;
```

--------------------------------

### Justify Content

Source: https://www.nativewind.dev/v5/llms.txt

Align grid items along the row axis. Options include 'start', 'end', 'center', 'between', 'evenly', and 'around'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="grid grid-cols-3 justify-center gap-4">
    <View className="bg-red-500 h-20 w-20"></View>
    <View className="bg-red-500 h-20 w-20"></View>
    <View className="bg-red-500 h-20 w-20"></View>
  </View>
);

export default App;
```

--------------------------------

### Basic NativeWind Metro Configuration

Source: https://www.nativewind.dev/v5/api/with-nativewind

Wrap your default Metro configuration with `withNativewind` to enable NativeWind support. This is the simplest way to integrate NativeWind.

```javascript
const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config);
```

--------------------------------

### Flex Display Utility

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `flex` class for full support of flexbox layouts.

```html
flex
```

--------------------------------

### Justify Items

Source: https://www.nativewind.dev/v5/llms.txt

Align grid items along the inline (row) axis within their grid area. Use 'start', 'end', 'center', or 'stretch'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="grid grid-cols-3 justify-items-center gap-4">
    <View className="bg-purple-500 h-20 w-20"></View>
    <View className="bg-purple-500 h-20 w-20"></View>
    <View className="bg-purple-500 h-20 w-20"></View>
  </View>
);

export default App;
```

--------------------------------

### Translate X Utility Classes

Source: https://www.nativewind.dev/v5/tailwind/transforms/translate

Supports translate-x-{n} and translate-x-[n] for full support.

```html
translate-x-{n}
```

```html
translate-x-[n]
```

--------------------------------

### Justify Self

Source: https://www.nativewind.dev/v5/llms.txt

Align a grid item along the inline (row) axis within its grid area. Options are 'auto', 'start', 'end', 'center', and 'stretch'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="grid grid-cols-3 gap-4">
    <View className="bg-yellow-500 h-20 w-20 justify-self-end"></View>
    <View className="bg-yellow-500 h-20 w-20 justify-self-center"></View>
    <View className="bg-yellow-500 h-20 w-20 justify-self-start"></View>
  </View>
);

export default App;
```

--------------------------------

### Component Not Passing Props

Source: https://www.nativewind.dev/v5/guides/third-party-components

This example shows a third-party component that 'picks' props, preventing Nativewind from styling it. It also shows the corrected version that passes all props down.

```javascript
// ❌ This component will not work with Nativewind
// This component is 'picking' the props.
// Any props that are not explicitly defined will not be passed down
function ThirdPartyComponent({ style }) {
  return <View style={style} />;
}

// ✅ This component will work with Nativewind
function ThirdPartyComponent({ style, ...props }) {
  return <View style={style} {...props} />;
}
```

--------------------------------

### Container

Source: https://www.nativewind.dev/v5/llms.txt

Apply responsive fixed widths to a container. Use 'container' and specify 'mx-auto'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="container mx-auto px-4">
    <View className="bg-blue-500 h-20"></View>
  </View>
);

export default App;
```

--------------------------------

### Example of NativeWind v4 JSX Transformation

Source: https://www.nativewind.dev/v5/guides/migrate-from-v4

This snippet shows how NativeWind v4 would transform React Native components with the `className` prop. This behavior is replaced in v5.

```jsx
import { View, Text } from "react-native";
 
<View className="bg-red-500 p-4">
  <Text className="text-white">Hello</Text>
</View>;
```

--------------------------------

### Flex-None Utility

Source: https://www.nativewind.dev/v5/tailwind/flexbox/flex

This class provides full support for flex-none functionality.

```html
flex-none
```

--------------------------------

### Component Prop Picking Limitation

Source: https://www.nativewind.dev/v5/guides/third-party-components

This example demonstrates how a component that 'picks' props can prevent the use of newer React Native APIs, such as `aria-label` introduced in version 0.71.

```javascript
function ThirdPartyComponent({ style }) {
  return <View style={style} />;
}

// aria-label was added in 0.71, but this component will not work with it!
<ThirdPartyComponent aria-label="My Label" />;
```

--------------------------------

### Arbitrary Value Columns Utility

Source: https://www.nativewind.dev/v5/tailwind/layout/columns

Use the `columns-[n]` utility to create a multi-column layout with an arbitrary number of columns. This is supported on web only.

```html
columns-[n]
```

--------------------------------

### Troubleshooting: Clear Cache Commands

Source: https://www.nativewind.dev/v5/llms-full.txt

Commands to start your application without the cache when troubleshooting NativeWind. Use `--clear` for Expo and `--reset-cache` for framework-less React Native.

```bash
npx expo start --clear
```

```bash
npx react-native start --reset-cache
```

--------------------------------

### Cursor Context Menu

Source: https://www.nativewind.dev/v5/tailwind/interactivity/cursor

Use the `cursor-context-menu` class to indicate that a context menu is available.

```html
cursor-context-menu
```

--------------------------------

### Styling Third-Party Components: Incorrect Implementation

Source: https://www.nativewind.dev/v5/llms-full.txt

Example of a third-party component that does not pass the `className` prop down, preventing NativeWind styling. This occurs when the component 'picks' props and doesn't forward them.

```tsx
// ❌ This component will not work with Nativewind
// This component is 'picking' the props.
// Any props that are not explicitly defined will not be passed down
function ThirdPartyComponent({ style }) {
  return <View style={style} />;
}
```

--------------------------------

### Grid Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `grid` class for web-only grid display.

```html
grid
```

--------------------------------

### Using CSS Variables with var()

Source: https://www.nativewind.dev/v5/llms-full.txt

Demonstrates how to define and use CSS custom properties (variables) for dynamic styling. Variables can be set in CSS or from JavaScript.

```css
:root {
  --brand-color: #3b82f6;
}

.branded {
  color: var(--brand-color);
}
```

```tsx
import { View, Text } from "react-native";
import { vars } from "nativewind";

function ThemedSection({ brandColor }) {
  return (
    <View style={vars({ "--brand-color": brandColor })}>
      <Text className="text-[--brand-color]">Themed text</Text>
    </View>
  );
}
```

--------------------------------

### Style Based on Data Attributes

Source: https://www.nativewind.dev/v5/core-concepts/states

Style components using `[data-*]` attribute selectors. This example applies styles based on a `data-active` attribute, with different styles for `true` and `false` values.

```javascript
import { View, Text } from "react-native";

function StatusBadge({ active }) {
  return (
    <View
      className="[&[data-active]]:bg-green-500 [&[data-active='false']]:bg-gray-500"
      {...{ dataSet: { active: active } }}
    >
      <Text>Status</Text>
    </View>
  );
}
```

--------------------------------

### Applying ThemeProvider in Root Layout

Source: https://www.nativewind.dev/v5/llms-full.txt

This snippet shows how to integrate the `ThemeProvider` component into your application's root layout file (`_layout.tsx`). Ensure global CSS is imported before applying the theme.

```tsx
import "../global.css";
import { ThemeProvider } from "@/components/ThemeProvider";

export default function RootLayout() {
  return (
    <ThemeProvider name="brand">
      <Stack />
    </ThemeProvider>
  );
}
```

--------------------------------

### Using the new styled() API

Source: https://www.nativewind.dev/v5/llms-full.txt

Replaces cssInterop and remapProps. Accepts the same options.

```jsx
import { styled } from 'nativewind';
import { View } from 'react-native';

// Same as cssInterop()
const StyledView = styled(View, { className: 'style' });

// Same as remapProps()
const RemappedView = styled(View, { className: 'style' }, { passThrough: true });
```

```jsx
const MyComponent = styled(View, { className: 'style' }, { global: false });
```

--------------------------------

### Component with Style Attribute Props

Source: https://www.nativewind.dev/v5/guides/third-party-components

This example demonstrates a third-party component that might not work as expected with NativeWind due to how it handles style props like `borderColor` and `backgroundColor` derived from the `style` prop.

```javascript
/*
 * This component will not work as expected with Nativewind
 *   - borderColor will not work as it is a prop
 *   - backgroundColor will not work as it is based on the style.color value
 */
function ThirdPartyComponent({ borderColor, style, ...props }) {
  // The background color is based on the style prop
  const backgroundColor = style.color === "white" ? "black" : "white";
  return (
    <View
      style={{
        ...style,
        borderColor,
        backgroundColor,
      }}
    />
  );
}
```

--------------------------------

### Order Utilities

Source: https://www.nativewind.dev/v5/tailwind/flexbox/order

These classes control the order of flex items. `order-{n}` supports values from the theme, while `order-first`, `order-last`, and `order-none` provide specific ordering.

```html
order-{n}
order-first
order-last
order-none
```

--------------------------------

### Apply 7XL Container Query Styles

Source: https://www.nativewind.dev/v5/tailwind/plugins/container-queries

Use the `@7xl:` variant to apply styles when the parent container meets the '7xl' breakpoint criteria. This allows for responsive adjustments at the 7XL container size.

```css
@7xl:
```

--------------------------------

### NativeWind v5 Font Configuration (CSS)

Source: https://www.nativewind.dev/v5/llms-full.txt

NativeWind v5 moves font configuration to CSS using the `@theme` block, aligning with standard Tailwind CSS practices. This simplifies setup and improves consistency.

```css
/* v5 approach (global.css) */
@theme {
  --font-inter: "Inter-Regular";
  --font-inter-bold: "Inter-Bold";
}
```

--------------------------------

### Apply 5XL Container Query Styles

Source: https://www.nativewind.dev/v5/tailwind/plugins/container-queries

Use the `@5xl:` variant to apply styles when the parent container meets the '5xl' breakpoint criteria. This enables responsive design for the 5XL container size.

```css
@5xl:
```

--------------------------------

### Example of JSX with className in Nativewind v4

Source: https://www.nativewind.dev/v5/llms-full.txt

This snippet shows the previous usage of `className` for styling React Native components in Nativewind v4. It will continue to work in v5 but is part of the deprecated JSX transform approach.

```jsx
import { View, Text } from "react-native";

<View className="bg-red-500 p-4">
  <Text className="text-white">Hello</Text>
</View>;
```

--------------------------------

### Override Theme Variables at Runtime

Source: https://www.nativewind.dev/v5/guides/themes

Use the `VariableContextProvider` component to override CSS variables at runtime. Wrap components that should inherit the new theme values. This example shows a basic override for primary and secondary colors.

```tsx
import { View, Text } from "react-native";
import { VariableContextProvider } from "nativewind";

const christmasTheme = {
  "--color-primary": "red",
  "--color-secondary": "green",
};

export default function App() {
  return (
    <View>
      <Text className="text-primary">Blue (default)</Text>

      <VariableContextProvider value={christmasTheme}>
        <Text className="text-primary">Red (christmas)</Text>
        <Text className="text-secondary">Green (christmas)</Text>
      </VariableContextProvider>
    </View>
  );
}
```

--------------------------------

### Width

Source: https://www.nativewind.dev/v5/llms.txt

Set the width of an element. Use 'w-X' where X is a size or percentage.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="w-1/2 bg-blue-500 h-20"></View>
);

export default App;
```

--------------------------------

### Platform-Specific Styling with Tailwind CSS Variants

Source: https://www.nativewind.dev/v5/core-concepts/tailwindcss

Use platform variants like 'native:' and 'web:' to apply different styles based on the rendering environment. This example shows flexbox on native and CSS grid on web.

```html
<View className="flex native:flex-col web:grid web:grid-cols-3">
  {/* flexbox on native, CSS grid on web */}
</View>
```

--------------------------------

### Table Layout

Source: https://www.nativewind.dev/v5/llms.txt

Set the table layout algorithm. Use 'table-auto' or 'table-fixed'.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="table-fixed w-full">
    <View className="border border-black p-2">Cell 1</View>
    <View className="border border-black p-2">Cell 2</View>
  </View>
);

export default App;
```

--------------------------------

### Style Children Based on Parent Group State

Source: https://www.nativewind.dev/v5/core-concepts/states

Use `group/{name}` on a parent and `group-{modifier}/{name}:` on children to style children based on the parent's state (e.g., hover, active, focus). This example shows active state styling.

```javascript
import { Pressable, Text, View } from "react-native";

function Card() {
  return (
    <Pressable className="group/card">
      <View className="group-active/card:bg-blue-100">
        <Text className="group-active/card:text-blue-700">
          Press the card to see child styles change
        </Text>
      </View>
    </Pressable>
  );
}
```

--------------------------------

### Device characteristic-specific styling with media queries

Source: https://www.nativewind.dev/v5/guides/migrate-from-v4

Use media queries with `pixelRatio()` and `fontScale()` to conditionally apply styles based on device characteristics.

```css
@theme {
  --spacing-custom-pixel: 11;
  --spacing-custom-font: 11;
}

@media (pixelRatio() > 2) {
  :root {
    --spacing-custom-pixel: 3;
  }
}

@media (fontScale() > 2) {
  :root {
    --spacing-custom-font: 3;
  }
}
```

--------------------------------

### Container Queries

Source: https://www.nativewind.dev/v5/llms.txt

Apply styles based on the size of a container, not the viewport. Requires a plugin and specific syntax.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="container-query" style={{ width: '50%', height: '50%' }}>
    <View className="@sm:bg-red-500 @lg:bg-blue-500">
      Responsive content based on container size.
    </View>
  </View>
);

export default App;
```

--------------------------------

### Compare v4 and v5 font configuration

Source: https://www.nativewind.dev/v5/guides/custom-fonts

Comparison of the legacy JavaScript-based configuration versus the new CSS-based approach.

```javascript
// v4 approach (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter-Regular"],
        "inter-bold": ["Inter-Bold"],
      },
    },
  },
};
```

```css
/* v5 approach (global.css) */
@theme {
  --font-inter: "Inter-Regular";
  --font-inter-bold: "Inter-Bold";
}
```

--------------------------------

### Ease-in Timing Function

Source: https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-timing-function

Represents the ease-in transition timing function. This class has experimental support on native platforms.

```html
ease-in
```

--------------------------------

### Ease-linear Timing Function

Source: https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-timing-function

Represents the ease-linear transition timing function. This class has experimental support on native platforms.

```html
ease-linear
```

--------------------------------

### remapProps

Source: https://www.nativewind.dev/v5/llms-full.txt

A simpler alternative to cssInterop for components that only need prop renaming.

```APIDOC
## remapProps

### Description
`remapProps` is a simpler alternative to `cssInterop` for components that just need prop renaming.

### Method Signature
`remapProps(component, propMap)`

### Parameters
#### `component`
- **component** (React.Component) - The component to remap props for.

#### `propMap`
- **newProp** (string | boolean) - Maps a new prop name to an existing style prop, or overrides an existing prop to accept `className`.

### Example
```tsx
import { remapProps } from "nativewind";

const CustomButton = remapProps(ThirdPartyButton, {
  buttonClass: "buttonStyle",
  labelClass: "labelStyle",
});

<CustomButton buttonClass="bg-blue-500" labelClass="text-white" />
```

### Example: Map new prop to existing style prop
```tsx
remapProps(component, { newProp: "existingStyleProp" });
```

### Example: Override existing prop to accept className
```tsx
remapProps(component, { existingProp: true });
```
```

--------------------------------

### Mapping Similar Props Individually

Source: https://www.nativewind.dev/v5/guides/third-party-components

Demonstrates mapping individual props like labelColor and inputColor to className properties. This approach requires creating a separate className for each prop.

```javascript
// This is possible
cssInterop(ThirdPartyComponent, {
  labelColorClassName: {
    target: false,
    nativeStyleToProps: { color: 'labelColor' }
  },
  inputColorClassName: {
    target: false,
    nativeStyleToProps: { color: 'inputColor' }
  }
})

function Wrapper() {
  // Need to create a new className for each prop
  const labelStyle = cva('color-black')
  const inputStyle = cva('color-black')

  return (
    <ThirdPartyComponent
      labelColorClassName={labelStyle}
      inputColorClassName={inputStyle}
    />
  )
}
```

--------------------------------

### Inline-Grid Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `inline-grid` class for web-only inline-grid display.

```html
inline-grid
```

--------------------------------

### Automatic Dark Mode with System Preference

Source: https://www.nativewind.dev/v5/core-concepts/dark-mode

Use the `dark:` variant to automatically adapt styles to the system's light or dark theme. No extra configuration is needed.

```javascript
import { View, Text } from "react-native";

function Card() {
  return (
    <View className="bg-white dark:bg-gray-900">
      <Text className="text-black dark:text-white">
        Adapts to system theme
      </Text>
    </View>
  );
}

```

--------------------------------

### Flex Wrap Utility Class

Source: https://www.nativewind.dev/v5/tailwind/flexbox/flex-wrap

Use the `flex-wrap` class to allow flex items to wrap onto multiple lines.

```html
<div class="flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
```

--------------------------------

### Platform-Specific Theme Values with CSS Media Queries

Source: https://www.nativewind.dev/v5/llms-full.txt

Illustrates how to define platform-specific theme values using CSS media queries within the `@theme` and `@media` rules. These defaults can be overridden at runtime.

```css
@theme {
  --color-error: var(--error-color, green);
}

@media ios {
  :root {
    --error-color: red;
  }
}

@media android {
  :root {
    --error-color: blue;
  }
}
```

--------------------------------

### Cursor Progress

Source: https://www.nativewind.dev/v5/tailwind/interactivity/cursor

Use the `cursor-progress` class to indicate that the program is busy but still interactive.

```html
cursor-progress
```

--------------------------------

### Box Shadow Utility Classes

Source: https://www.nativewind.dev/v5/tailwind/effects/box-shadow

Lists common box shadow utility classes and their support status in NativeWind.

```markdown
```
shadow-sm
```
```

```markdown
```
shadow
```
```

```markdown
```
shadow-md
```
```

```markdown
```
shadow-lg
```
```

```markdown
```
shadow-xl
```
```

```markdown
```
shadow-2xl
```
```

```markdown
```
shadow-none
```
```

--------------------------------

### Create a Component with Variants

Source: https://www.nativewind.dev/v5/guides/custom-components

Build a component with different visual styles (variants) that can be selected via props, alongside custom class names.

```javascript
const variantStyles = {
  default: "rounded",
  primary: "bg-blue-500 text-white",
  secondary: "bg-white-500 text-black",
};

function MyComponent({ variant, className, ...props }) {
  return (
    <Text
      className={
        `${variantStyles.default}`
        `${variantStyles[variant]}`
        `${className}`
      }
      {...props }
    />
  );
}
```

--------------------------------

### Mapping Multiple Style Props with cssInterop

Source: https://www.nativewind.dev/v5/llms-full.txt

Demonstrates how to use `cssInterop` to map individual className props to specific style props like `labelColor` and `inputColor` on a component.

```tsx
// This is possible
cssInterop(ThirdPartyComponent, {
  labelColorClassName: {
    target: false
    nativeStyleToProps: { color: 'labelColor' }
  }
  inputColorClassName: {
    target: false
    nativeStyleToProps: { color: 'inputColor' }
  }
})

function Wrapper() {
  // Need to create a new className for each prop
  const labelStyle = cva('color-black')
  const inputStyle = cva('color-black')

  return (
    <ThirdPartyComponent
      labelColorClassName={labelStyle}
      inputColorClassName={inputStyle}
    />
  )
}
```

--------------------------------

### Cursor Zoom In

Source: https://www.nativewind.dev/v5/tailwind/interactivity/cursor

Use the `cursor-zoom-in` class to indicate zooming in.

```html
cursor-zoom-in
```

--------------------------------

### Saturate Class with Arbitrary Values

Source: https://www.nativewind.dev/v5/tailwind/filters/saturate

Use the `saturate-[n]` class to apply saturation filters with arbitrary values. This also provides full support.

```html
saturate-[n]
```

--------------------------------

### Remap props options for NativeWind

Source: https://www.nativewind.dev/v5/api/css-interop

Demonstrates two options for remapProps: mapping a new prop to an existing style prop, and overriding an existing prop to accept className.

```javascript
// Map a new prop to an existing style prop
remapProps(component, { newProp: "existingStyleProp" });

// Override an existing prop to accept className
remapProps(component, { existingProp: true });
```

--------------------------------

### Configure Metro Bundler with NativeWind Plugin

Source: https://www.nativewind.dev/v5/guides/using-with-monorepos

Add the Nativewind plugin to your `metro.config.js` file to ensure proper integration within an Nx monorepo. This uses a promise chain to merge configurations.

```javascript
const { withNativeWind } = require("nativewind/metro");

// ... existing Nx configuration

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // ... existing Nx config
}).then((config) => withNativeWind(config));
```

--------------------------------

### Table Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `table` class for web-only table display.

```html
table
```

--------------------------------

### Place Content Around

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-content

Use `place-content-around` to distribute content with equal space around them in a flex container. This utility is only supported on the web.

```html
place-content-around
```

--------------------------------

### Replace `vars()` with `VariableContextProvider`

Source: https://www.nativewind.dev/v5/guides/migrate-from-v4

The `vars()` function for dynamic theming is deprecated. Replace it with the `VariableContextProvider` component for managing theme variables.

```diff
- import { vars } from "nativewind";
+ import { VariableContextProvider } from "nativewind";

- const theme = vars({ "--color-primary": "red" });

- <View style={theme}>
-   {children}
- </View>

+ <VariableContextProvider value={{ "--color-primary": "red" }}>
+   {children}
+ </VariableContextProvider>
```

--------------------------------

### Inset Y Utilities

Source: https://www.nativewind.dev/v5/tailwind/layout/top-right-bottom-left

Use these classes to set the 'top' and 'bottom' properties simultaneously. Supports theme values, arbitrary values, and 'auto'.

```html
inset-y-{n}
inset-y-[n]
inset-y-auto
```

--------------------------------

### Arbitrary Background Color Value

Source: https://www.nativewind.dev/v5/tailwind/backgrounds/background-color

Use the `bg-[color]` syntax to apply arbitrary background color values. This is fully supported.

```html
bg-[color]
```

--------------------------------

### Component Composition with className

Source: https://www.nativewind.dev/v5/core-concepts/style-specificity

Demonstrates how styles compose naturally through string concatenation when custom components accept and pass down `className` props.

```javascript
function MyText({ className, ...props }) {
  return <Text className={`text-base text-black ${className}`} {...props} />;
}
 
// User's className takes effect via CSS source order
<MyText className="text-red-500" />
```

--------------------------------

### Sticky Positioning

Source: https://www.nativewind.dev/v5/tailwind/layout/position

Use the `sticky` class for sticky positioning. This has partial support on native platforms.

```html
sticky
```

--------------------------------

### Backdrop Opacity Utility Classes

Source: https://www.nativewind.dev/v5/tailwind/filters/backdrop-opacity

Use these classes to control the opacity of backdrops. Supports values from the theme or arbitrary values.

```html
backdrop-opacity-{n}
```

```html
backdrop-opacity-[n]
```

--------------------------------

### Border Solid Utility

Source: https://www.nativewind.dev/v5/tailwind/borders/border-style

Use the `border-solid` class for solid borders. This utility is fully supported on both web and native platforms.

```html
border-solid
```

--------------------------------

### Min-Height Full

Source: https://www.nativewind.dev/v5/tailwind/sizing/min-height

Use `min-h-full` to set the minimum height to 100% of the parent's height. This is fully supported.

```html
min-h-full
```

--------------------------------

### Nesting VariableContextProvider for Specific Overrides

Source: https://www.nativewind.dev/v5/guides/themes

Demonstrates how to nest `VariableContextProvider` components to override specific variables while inheriting others from parent contexts. This allows for fine-grained control over theming within different parts of the UI.

```tsx
<VariableContextProvider value={{ "--color-primary": "blue" }}>
  <Text className="text-primary">Blue</Text>

  <VariableContextProvider value={{ "--color-primary": "red" }}>
    <Text className="text-primary">Red (overridden)</Text>
  </VariableContextProvider>
</VariableContextProvider>
```

--------------------------------

### Background Color Configuration

Source: https://www.nativewind.dev/v5/llms-full.txt

Set background colors using predefined color names, arbitrary values, 'bg-current', or 'bg-transparent'.

```jsx
import Compatibility from "../_compatibility.mdx";
import Usage from "../_usage.tsx";

{/* # Background Color */}

## Usage

<Usage />

## Compatibility

<Compatibility
  supported={["bg-{color}", "bg-[color]", "bg-current", "bg-transparent"]}
/>
```

--------------------------------

### Styling Third-Party Components: Correct Implementation

Source: https://www.nativewind.dev/v5/llms-full.txt

Shows the correct way to implement a third-party component to work with NativeWind by ensuring the `className` prop (and others) are passed down using the spread operator.

```tsx
// ✅ This component will work with Nativewind
function ThirdPartyComponent({ style, ...props }) {
  return <View style={style} {...props} />;
}
```

--------------------------------

### Place Self Auto Utility

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-self

Use `place-self-auto` to allow the browser to determine the alignment of a flex or grid item. This utility is only supported on the web.

```html
place-self-auto
```

--------------------------------

### Apply 3XL Container Query Styles

Source: https://www.nativewind.dev/v5/tailwind/plugins/container-queries

Use the `@3xl:` variant to apply styles when the parent container meets the '3xl' breakpoint criteria. This allows for responsive adjustments at the 3XL container size.

```css
@3xl:
```

--------------------------------

### Migrating from v4 vars() to VariableContextProvider

Source: https://www.nativewind.dev/v5/guides/themes

Shows the migration path from the deprecated `vars()` function in NativeWind v4 to the `VariableContextProvider` in v5. This involves changing the import and how theme values are applied.

```tsx
- import { vars } from "nativewind";
+ import { VariableContextProvider } from "nativewind";

- const theme = vars({ "--color-primary": "red" });

- <View style={theme}>
-   {children}
- </View>

+ <VariableContextProvider value={{ "--color-primary": "red" }}>
+   {children}
+ </VariableContextProvider>
```

--------------------------------

### Min-Height Screen

Source: https://www.nativewind.dev/v5/tailwind/sizing/min-height

Use `min-h-screen` to set the minimum height to 100% of the viewport height. This is fully supported.

```html
min-h-screen
```

--------------------------------

### TypeScript Type Definitions for NativeWind

Source: https://www.nativewind.dev/v5/getting-started/installation

Set up TypeScript type definitions by creating a `nativewind-env.d.ts` file with a triple-slash directive.

```typescript
/// <reference types="react-native-css/types" />

// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.
```

--------------------------------

### Inline Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `inline` class for web-only inline display.

```html
inline
```

--------------------------------

### Min-Height Arbitrary Values

Source: https://www.nativewind.dev/v5/tailwind/sizing/min-height

Use `min-h-[n]` to apply arbitrary min-height values. This is fully supported.

```html
min-h-[n]
```

--------------------------------

### Configure jsxImportSource with Babel in babel.config.js

Source: https://www.nativewind.dev/v5/llms-full.txt

Configures the `@babel/plugin-transform-react-jsx` plugin to use `nativewind` as the `importSource` for automatic JSX runtime, essential for Babel-compiled Next.js projects.

```diff
module.exports = {
  presets: ["next/babel"],
+  plugins: [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        runtime: "automatic",
+        importSource: "nativewind",
+      },
+    ],
+  ],
 };
```

--------------------------------

### Transition Property Classes

Source: https://www.nativewind.dev/v5/tailwind/transitions-animation/transition-property

Lists common Tailwind CSS transition-property classes and their experimental support status.

```html
transition
```

```html
transition-all
```

```html
transition-colors
```

```html
transition-opacity
```

```html
transition-shadow
```

```html
transition-transform
```

```html
transition-none
```

--------------------------------

### List-Item Display Utility (Web Only)

Source: https://www.nativewind.dev/v5/tailwind/layout/display

Use the `list-item` class for web-only list-item display.

```html
list-item
```

--------------------------------

### Apply Medium Container Query Styles

Source: https://www.nativewind.dev/v5/tailwind/plugins/container-queries

Use the `@md:` variant to apply styles when the parent container meets the 'md' breakpoint criteria. This allows for responsive adjustments at medium container sizes.

```css
@md:
```

--------------------------------

### Min-Height Fit

Source: https://www.nativewind.dev/v5/tailwind/sizing/min-height

Use `min-h-fit` to set the minimum height to fit the content. This is fully supported.

```html
min-h-fit
```

--------------------------------

### Backdrop Saturate Arbitrary Value

Source: https://www.nativewind.dev/v5/tailwind/filters/backdrop-saturate

Use the `backdrop-saturate-[n]` class to apply an arbitrary saturation value. This is supported on the web.

```html
backdrop-saturate-[n]
```

--------------------------------

### Cursor NWSE-Resize

Source: https://www.nativewind.dev/v5/tailwind/interactivity/cursor

Use the `cursor-nwse-resize` class for north-west-south-east resizing.

```html
cursor-nwse-resize
```

--------------------------------

### Place Content Between

Source: https://www.nativewind.dev/v5/tailwind/flexbox/place-content

Use `place-content-between` to distribute content with equal space between them in a flex container. This utility is only supported on the web.

```html
place-content-between
```

--------------------------------

### Best Practice for Dark Mode Styles

Source: https://www.nativewind.dev/v5/llms-full.txt

Always provide both light and dark mode variants for styles to ensure consistent behavior across different themes.

```tsx
{/* Always specify both variants */}
<Text className="text-black dark:text-white" />

{/* Avoid only specifying one */}
<Text className="dark:text-white" />
```

--------------------------------

### Import Global CSS in App.js

Source: https://www.nativewind.dev/v5/getting-started/installation

Import your global CSS file at the top-most component of your application to apply styles.

```javascript
import "./global.css"

export default App() {
  /* Your App */
}
```

--------------------------------

### Text Indent Class (Arbitrary Values)

Source: https://www.nativewind.dev/v5/tailwind/typography/text-indent

Demonstrates the `indent-[n]` class for applying text indentation with arbitrary values. This class is web-only.

```html
```
indent-[n]
```
```

--------------------------------

### Height

Source: https://www.nativewind.dev/v5/llms.txt

Set the height of an element. Use 'h-X' where X is a size or percentage.

```javascript
import React from 'react';
import { View } from 'react-native';

const App = () => (
  <View className="h-24 bg-blue-500"></View>
);

export default App;
```

--------------------------------

### Handle Multiple Style Props in a Custom Component

Source: https://www.nativewind.dev/v5/guides/custom-components

Illustrates creating a component that accepts and applies different class names to nested elements via distinct props.

```javascript
function MyComponent({ className, textClassName }) {
  return (
    <View className={className}>
      <Text className={textClassName}>Hello, Nativewind!</Text>
    </View>
  );
}
```

--------------------------------

### Using Special Keywords for Text Decoration Color

Source: https://www.nativewind.dev/v5/tailwind/typography/text-decoration-color

Utilize special keywords like 'current', 'inherit', and 'transparent' for text decoration colors.

```html
<p class="decoration-current">This text's underline color matches the current text color.</p>
<p class="decoration-inherit">This text inherits its underline color from its parent.</p>
<p class="decoration-transparent">This text has a transparent underline.</p>
```

--------------------------------

### Scroll Snap Normal Utility

Source: https://www.nativewind.dev/v5/tailwind/interactivity/scroll-snap-stop

Use the `snap-normal` class to allow the scroll container to snap to any valid snap point, or not snap at all.

```html
<div class="snap-normal ...">
  <!-- Content -->
</div>
```

--------------------------------

### Capture Nativewind Debug Output to File (Windows - PowerShell)

Source: https://www.nativewind.dev/v5/llms-full.txt

For PowerShell on Windows, use this syntax to enable debug mode and redirect all output to `output.log`.

```powershell
$env:DEBUG="nativewind"; <start-command> *> output.log
```

--------------------------------

### Space Between X Utilities

Source: https://www.nativewind.dev/v5/tailwind/spacing/space-between

Use space-x utilities to control the space between elements horizontally. Supports theme values and arbitrary values.

```html
space-x-{n}
space-x-[n]
```

--------------------------------

### Background Attachment Options

Source: https://www.nativewind.dev/v5/llms-full.txt

Configure background attachment properties. Note that 'bg-fixed', 'bg-local', and 'bg-scroll' are not supported.

```jsx
import Compatibility from "../_compatibility.mdx";
import Usage from "../_usage.tsx";

{/* # Background Attachment */}

## Usage

<Usage />

## Compatibility

<Compatibility
  none={["bg-fixed", "bg-local", "bg-scroll"]}
/>
```

--------------------------------

### Backdrop Contrast Utility Class

Source: https://www.nativewind.dev/v5/tailwind/filters/backdrop-contrast

This class applies a backdrop contrast filter. Supports values from the theme or arbitrary values.

```html
backdrop-contrast-{n}
backdrop-contrast-[n]
```