### Install Pods for Reanimated

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

Run 'pod-install' to complete the installation of react-native-reanimated after installing Nativewind and its dependencies.

```bash
npx pod-install
```

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

### Install Nativewind and Dependencies

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

Install Nativewind, react-native-reanimated, react-native-safe-area-context, and tailwindcss. Also install prettier-plugin-tailwindcss for code formatting.

```bash
npm install nativewind react-native-reanimated react-native-safe-area-context
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11
```

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

### Place Content Start

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

Use `place-content-start` to align items to the start of both the main and cross axes in a flex container. This utility is only supported on the web.

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

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

### Place Items Start

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

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

```html
<div class="place-items-start">
  <!-- Content -->
</div>
```

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

### Align Items Start Utility

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

Use `items-start` to align flex items to the start of the cross axis. This is fully supported.

```html
items-start
```

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

### Basic Box Shadow Example in NativeWind

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

This example demonstrates applying a basic shadow to a View and Text component using NativeWind classes. Ensure a background color is set on native platforms for shadows to appear.

```javascript
import { Text, View } from 'react-native';
import { styled } from 'nativewind';
 
const StyledView = styled(View)
const StyledText = styled(Text)
 
const App = () => {
  return (
    <StyledView className="flex-1 items-center justify-center">
      <StyledView className="h-[50vh] items-center justify-center shadow">
        <StyledText className="text-slate-800 shadow">Try editing me! 🎉</StyledText>
      </StyledView>
    </StyledView>
  );
}
```

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

### Install Nativewind and Dependencies

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

Install the necessary packages for Nativewind, including react-native-reanimated and react-native-safe-area-context. Also, install development dependencies for Tailwind CSS and Babel.

```bash
npm install nativewind react-native-reanimated react-native-safe-area-context
npm install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 babel-preset-expo
```

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

### Setup and Usage of SVG Stroke with NativeWind

Source: https://www.nativewind.dev/docs/tailwind/svg/stroke

This example demonstrates how to set up `cssInterop` for SVG components from `react-native-svg` and apply Tailwind CSS classes for stroke, fill, and dimensions. Ensure `react-native-svg` is installed and `cssInterop` is configured correctly.

```javascript
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
import { cssInterop } from 'nativewind'
 
cssInterop(Svg, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true }
  },
});
cssInterop(Circle, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
cssInterop(Rect, {
  className: {
    target: "style",
    nativeStyleToProp: { width: true, height: true, stroke: true, strokeWidth: true, fill: true }
  },
});
 
export function SvgExample () {
  return (
    <View className="inset-0 items-center content-center">
      <Svg className="h-1/2 w-1/2" viewBox="0 0 100 100" >
        <Circle cx="50" cy="50" r="45" className="stroke-blue-500 stroke-2 fill-green-500" />
        <Rect x="15" y="15" className="w-16 h-16 stroke-red-500 stroke-2 fill-yellow-500" />
      </Svg>
    </View>
  );
}
```

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

### Place Self Start

Source: https://www.nativewind.dev/docs/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 class is only supported on the web.

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

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

### Component Not Working with NativeWind (Example)

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

This example demonstrates a third-party component that may not work as expected with NativeWind due to how it handles `borderColor` and `backgroundColor` based on 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,
      }}
    />
  );
}
```

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

### Verify Nativewind Installation within a Component

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

Import and run the verifyInstallation() utility function inside 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;
```

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

### Third-Party Component with Similar Props

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

Example of a third-party component that accepts multiple color props for different elements.

```javascript
function ThirdPartyComponent({ labelColor, inputColor, ...props }) {
  return (
    <>
      <Text style={color: labelColor}>Label</Text>
      <TextInput style={color: labelColor} />
    </>
  );
}
```

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

### RemapProps Options

Source: https://www.nativewind.dev/docs/api/remap-props

Demonstrates the basic usage of remapProps for creating new props or overriding existing ones. The first example shows mapping a new prop to an existing one, and the second shows overriding an existing prop.

```javascript
// Create a new prop and map it to an existing prop
remapProps(component, { "new-prop": "existing-prop" });

// Override an existing prop.
remapProps(component, { prop: true });
```

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

### Import and Basic Usage of cssInterop

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

Import the cssInterop function and use it to tag components. This example shows how to create a new prop mapped to an existing one, or override an existing prop.

```javascript
import { cssInterop } from 'nativewind';

// Create a new prop and map it to an existing prop
cssInterop(component, { "new-prop": "existing-prop" });

// Override an existing prop.
cssInterop(component, { "new-prop": true });

// Override an existing prop.
cssInterop(component, {
  "new-prop": {
    target: "existing-prop", // string or boolean
    nativeStyleToProp: {
      "style-attribute": "existing-prop",
    }
  }
});
```

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

### Install expo-font

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

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

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

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

### Break Before All Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-before

Use `break-before-all` to force a page or column break before every element. This ensures each element starts on a new page or column.

```html
<div class="break-before-all">
  <!-- Content -->
</div>
```

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

### Enable Debug Mode for Nativewind (Mac/Linux/Windows)

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

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

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

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

### Tailwind CSS Grid Column Start Classes

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

Use `col-start-*` classes to specify the starting column line for an element. Supported values range from 1 to 13, plus `auto`. These classes are web-only.

```html
col-start-1
```

```html
col-start-2
```

```html
col-start-3
```

```html
col-start-4
```

```html
col-start-5
```

```html
col-start-6
```

```html
col-start-7
```

```html
col-start-8
```

```html
col-start-9
```

```html
col-start-10
```

```html
col-start-11
```

```html
col-start-12
```

```html
col-start-13
```

```html
col-start-auto
```

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

### Test Nativewind Setup with a Component

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

Create a simple React Native component using the 'className' prop to apply Tailwind utility classes for styling.

```javascript
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>
  );
}
```

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

### Implement Dark Mode Toggle with Nativewind

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

This example demonstrates how to create a basic theme toggle using React Native state and Nativewind's `colorScheme.set()` function. It allows users to switch between light and dark themes, updating the UI and the system's color scheme preference accordingly. Persist user choices with storage solutions like Async Storage.

```javascript
import { useState } from "react";
import { SafeAreaView, Text, Pressable } from "react-native";
import { colorScheme } from "nativewind";
import { StatusBar } from 'expo-status-bar';

import './global.css';

export default function App() {
  const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("light");

  const toggleTheme = () => {
    const newTheme = currentTheme === "light" ? "dark" : "light";
    setCurrentTheme(newTheme);
    colorScheme.set(newTheme);
  };

  return (
    <SafeAreaView
      className={`flex-1 ${currentTheme === 'dark' ? 'bg-gray-900' : 'bg-white'} justify-center items-center`}
    >
      <StatusBar style={currentTheme === 'dark' ? 'light' : 'dark'} />
      <Pressable
        onPress={toggleTheme}
        className="mt-4"
      >
        <Text className={currentTheme === 'dark' ? 'text-gray-100' : 'text-gray-900'} style={{ fontSize: 16, fontWeight: 'bold' }}>
          {currentTheme === 'dark' ? 'Dark' : 'Light'}
        </Text>
      </Pressable>
    </SafeAreaView>
  );
}
```

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

### Mapping Styles for TextInput Component

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

This example demonstrates how to use cssInterop to map `className` to the `style` prop for a TextInput component. It also shows how to extract specific styles and pass them to other props like `placeholderTextColor` and `selectionColor`.

```javascript
cssInterop(TextInput, {
  className: {
    target: "style", // map className->style
    nativeStyleToProp: {
      textAlign: true, // extract `textAlign` styles and pass them to the `textAlign` prop
    },
  },
  placeholderClassName: {
    target: false, // Don't pass this as a prop
    nativeStyleToProp: {
      color: "placeholderTextColor", // extract `color` and pass it to the `placeholderTextColor`prop
    },
  },
  selectionClassName: {
    target: false, // Don't pass this as a prop
    nativeStyleToProp: {
      color: "selectionColor", // extract `color` and pass it to the `selectionColor`prop
    },
  },
});
```

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

### Clear Cache for Framework-less React Native

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

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

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

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

### Dynamic Mapping Modifier Syntax Example

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

Illustrates how to use the dynamic mapping modifier to map a className to a nested style property.

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

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

### Z-Index Class Examples

Source: https://www.nativewind.dev/docs/tailwind/layout/z-index

Examples of Z-Index classes supported by Tailwind CSS. `z-{n}` supports theme values, while `z-[n]` supports arbitrary values. `z-auto` is web-only.

```html
z-{n}
```

```html
z-[n]
```

```html
z-auto
```

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

### TypeScript Type Definitions Setup

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

Add a triple-slash directive to a .d.ts file (e.g., nativewind-env.d.ts) to include Nativewind's TypeScript type definitions.

```typescript
/// <reference types="nativewind/types" />
```

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

### Clear Cache for Expo

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

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

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

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

### Tailwind CSS Gradient Background Utilities

Source: https://www.nativewind.dev/docs/tailwind/backgrounds/background-image

Tailwind CSS provides utilities for creating gradient backgrounds. These classes control the direction of the gradient and are only supported on the web. Examples include `bg-gradient-to-t` (top), `bg-gradient-to-tr` (top-right), `bg-gradient-to-r` (right), and so on, covering all eight directions.

```html
bg-gradient-to-t
```

```html
bg-gradient-to-tr
```

```html
bg-gradient-to-r
```

```html
bg-gradient-to-br
```

```html
bg-gradient-to-b
```

```html
bg-gradient-to-bl
```

```html
bg-gradient-to-l
```

```html
bg-gradient-to-tl
```

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

### Place Content Between

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

Use `place-content-between` to distribute items evenly along the main axis with the first item at the start and the last item at the end. This utility is only supported on the web.

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

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

### Dynamic Styling with Conditional Logic

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

Build complex style objects dynamically using conditional logic. This example applies font styles like bold, italic, and line-through based on component props.

```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} />;
}
```

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

### Break Before Page Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-before

Use `break-before-page` to force a page break before an element. This ensures the element starts on a new page.

```html
<div class="break-before-page">
  <!-- Content -->
</div>
```

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

### Using pixelRatio for Scaled Sizes

Source: https://www.nativewind.dev/docs/customization/theme

The `pixelRatio` helper scales values based on the device's pixel density. Provide a number to multiply `PixelRatio.get()` by, or call it without arguments to get the raw value.

```javascript
const { pixelRatio } = require("nativewind/theme");

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        number: pixelRatio(2),
      },
    },
  },
};
```

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

### Initialize New Expo Project with Nativewind

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

Use this command to quickly set up a new Expo project with Nativewind and Tailwind CSS pre-configured.

```bash
npx rn-new --nativewind
```

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

### Managing Similar Props with Individual Mappings

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

Demonstrates creating individual mappings for each similar prop, which can be cumbersome.

```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}
    />
  )
}
```

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

### Implement Multi-Theme Support with Color Schemes

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

Create a reusable `Theme` component that switches between different theme configurations (e.g., 'brand', 'christmas') based on the system's color scheme (light/dark).

```javascript
import { vars, useColorScheme } from 'nativewind'
 
const themes = {
  brand: {
    'light': vars({
      '--color-primary': 'black',
      '--color-secondary': 'white'
    }),
    'dark': vars({
      '--color-primary': 'white',
      '--color-secondary': 'dark'
    })
  },
  christmas: {
    'light': vars({
      '--color-primary': 'red',
      '--color-secondary': 'green'
    }),
    'dark': vars({
      '--color-primary': 'green',
      '--color-secondary': 'red'
    })
  }
}
 
function Theme(props) {
  const { colorScheme } = useColorScheme()
  return (
    <View style={themes[props.name][colorScheme]}>
      {props.children}
    </View>
  )
}
 
export default App() {
  return (
    <Theme name="brand">
      <View className="text-primary">{/* rgba(0, 0, 0, 1) */}>
      <Theme name="christmas">
        <View className="text-primary">{/* rgba(255, 0, 0, 1) */}>
      </Theme>
    </Theme>
  )
}
```

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

### Transition Timing Function Classes

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

Demonstrates the classes available for controlling transition timing functions. `ease-{n}` supports theme values, while `ease-[n]` supports arbitrary values.

```html
<!-- Using theme values -->
<div class="transition-all ease-in-out duration-300 ...">
  <!-- ... -->
</div>

<!-- Using arbitrary values -->
<div class="transition-all ease-[cubic-bezier(0.1,0.7,1.0,0.1)] duration-300 ...">
  <!-- ... -->
</div>
```

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

### Tailwind CSS justify-items-start

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

Aligns items to the start of the container. Web only.

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

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

### Initialize Tailwind CSS

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

Create a tailwind.config.js file using the Tailwind CLI. This file is essential for configuring Tailwind CSS for your project.

```bash
npx tailwindcss init
```

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

### Using useColorScheme Hook

Source: https://www.nativewind.dev/docs/api/use-color-scheme

Demonstrates how to access the current color scheme and toggle it between light and dark modes by pressing a Text component. Requires importing useColorScheme from 'nativewind'.

```javascript
import { useColorScheme } from "nativewind";
import { Text } from "react-native";
 
function MyComponent() {
  const { colorScheme, setColorScheme } = useColorScheme();
 
  return (
    <Text
      onPress={() => setColorScheme(colorScheme === "light" ? "dark" : "light")}
    >
      {`The color scheme is ${colorScheme}`}
    </Text>
  );
}
```

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

### Break Before Right Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-before

Use `break-before-right` to force a page break before an element, ensuring it starts on the next even-numbered page (right page).

```html
<div class="break-before-right">
  <!-- Content -->
</div>
```

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

### Break Before Left Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-before

Use `break-before-left` to force a page break before an element, ensuring it starts on the next odd-numbered page (left page).

```html
<div class="break-before-left">
  <!-- Content -->
</div>
```

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

### Break After Left Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-after

Use 'break-after-left' to force a page break after an element, ensuring the next element starts on a left-hand page. This is a web-only utility.

```html
break-after-left
```

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

### Flow-Root Display (Web Only)

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

Use the `flow-root` class to create a new block formatting context. This is supported on the web only.

```html
flow-root
```

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

### Box Shadow Class Support

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

Shows the compatibility of shadow-{n} and shadow-[n] classes in NativeWind.

```markdown
```
shadow-{n}
```
| ✅ Full Support  
```
shadow-[n]
```
| ✅ Full Support  
```

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

### Break After Right Utility

Source: https://www.nativewind.dev/docs/tailwind/layout/break-after

Use 'break-after-right' to force a page break after an element, ensuring the next element starts on a right-hand page. This class is supported only on the web.

```html
break-after-right
```

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

### Basic Border Width Utility

Source: https://www.nativewind.dev/docs/tailwind/borders/border-width

Use the `border` class to apply a default border width. This is the most basic way to add a border.

```html
border
```

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

### Using will-change-transform for Conditional Animations

Source: https://www.nativewind.dev/docs/tailwind/interactivity/will-change

This example demonstrates how to use `will-change-transform` to ensure a component remains animated even when animation classes are conditional, preventing unmounting issues with `react-native-reanimated`.

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

const AnimatedView = Animated.createAnimatedComponent(View);

function MyComponent({ isAnimated }) {
  return (
    <AnimatedView className={isAnimated ? 'animate-bounce' : ''} />
  );
}

// To prevent unmounting when isAnimated is conditional:
function MyComponentWithWillChange({ isAnimated }) {
  return (
    <AnimatedView className={`${isAnimated ? 'animate-bounce' : ''} will-change-transform`} />
  );
}
```

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

### Grid Display (Web Only)

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

Use the `grid` class for grid layouts. This is supported on the web only.

```html
grid
```

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

### Tailwind CSS Grid Column Auto Class

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

Use `col-auto` to let the grid column determine its own start and end based on the grid track sizing. This class is only supported on the web.

```html
col-auto
```

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

### useColorScheme()

Source: https://www.nativewind.dev/docs/api/use-color-scheme

Provides access to the device's color scheme and allows for overriding or toggling it. It returns the current color scheme and functions to modify it.

```APIDOC
## useColorScheme()

### Description
Provides access to the device's color scheme. It returns the current color scheme and functions to override or toggle it.

### Usage
```javascript
import { useColorScheme } from "nativewind";

const { colorScheme, setColorScheme, toggleColorScheme } = useColorScheme();
```

### Return Values
- **colorScheme** (string): The current device color scheme (`light`, `dark`, or `system`).
- **setColorScheme** (function): Overrides the current color scheme. Accepts `light`, `dark`, or `system` as arguments.
- **toggleColorScheme** (function): Toggles the color scheme between `light` and `dark`.
```

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

### Configure Layout Size with Pixel Conversion

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

Use `getPixelSizeForLayoutSize()` to convert layout sizes to pixel values, equivalent to `PixelRatio.getPixelSizeForLayoutSize()`.

```javascript
const { getPixelSizeForLayoutSize } = require("nativewind/theme");

module.exports = {
  theme: {
    extend: {
      size: {
        custom: getPixelSizeForLayoutSize(2),
      },
    },
  },
};
```

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

### Tailwind CSS Gradient 'from' Color Stops

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

Use these classes to define the starting color of a gradient. Supports theme colors, current color, transparent, black, white, and arbitrary values.

```html
from-inherit
from-current
from-transparent
from-black
from-white
from-{n}
from-[n]
```

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

### Flex Basis Utilities

Source: https://www.nativewind.dev/docs/tailwind/flexbox/flex-basis

These classes control the initial size of flex items. `basis-{n}` uses values from the theme, while `basis-[n]` supports arbitrary values. `basis-auto` is specific to web environments.

```html
basis-{n}
```

```html
basis-[n]
```

```html
basis-auto
```

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

### Using className with Third-Party Components

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

Integrate NativeWind styles into custom or third-party components by simply using the `className` prop. This example shows how to apply styles to a `CustomText` component from an external library.

```javascript
import { CustomText } from "third-party-text-component";

export function BoldText(props) {
  // You just need to write `className="<your styles>"`
  return <CustomText className="text-bold" {...props} />;
}
```

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

### Min-Width Utility Classes

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

Lists common min-width utility classes and their support status. Use these classes to set the minimum width of an element.

```markdown
Class| Support  
---|---  
```
min-w-0
```
| ✅ Full Support  
```
min-w-[n]
```
| ✅ Full Support  
```
min-w-full
```
| ✅ Full Support  
```
min-w-min
```
| 🌐 Web only  
```
min-w-max
```
| 🌐 Web only  
```
min-w-fit
```
| 🌐 Web only  
```

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

### Space Between Compatibility

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

Lists the compatibility of various space between utilities. These are currently web-only.

```html
space-{n}
```

```html
space-[n]
```

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

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

```html
space-y-{n}
```

```html
space-y-[n]
```

```html
space-x-reverse
```

```html
space-y-reverse
```

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

### Interoperability with SVG Components

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

Use `cssInterop` to enable `className` support for components like `react-native-svg`'s `Svg` and `Circle`. This example demonstrates mapping `className` to native style props and web-specific attributes.

```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>
  );
}
```

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

### Platform Style Specificity Differences

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

Illustrates how the same style declarations can render differently on Native and Web platforms due to their respective style specificity rules.

```javascript
// Native has red text
<Text style={{ color: 'black' }, { color: 'red' }} />
 
// Web has black text
<Text className="text-red-500" style={{ color: 'black'}} />
```

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

### Remapping Multiple Style Props

Source: https://www.nativewind.dev/docs/api/remap-props

Use remapProps to map new class-name-accepting props to multiple existing style props of a third-party component. This example shows how to map 'buttonClass' to 'buttonStyle' and 'labelClass' to 'labelStyle'.

```javascript
import { remapProps } from "nativewind";

/**
  ThirdPartyButton is a component with two "style" props, buttonStyle & labelStyle.
  We can use remapProps to create new props that accept Tailwind CSS's classNames.
 */
const CustomizedButton = remapProps(ThirdPartyButton, {
  buttonClass: "buttonStyle",
  labelClass: "labelStyle",
});

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

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

### Width Utility Classes

Source: https://www.nativewind.dev/docs/tailwind/sizing/width

Overview of supported width utility classes and their compatibility. Includes theme-based, arbitrary, and special width values.

```html
w-{n}

```

```html
w-[n]

```

```html
w-full

```

```html
w-screen

```

```html
w-auto

```

```html
w-min

```

```html
w-max

```

```html
w-fit

```

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

### Flex Display

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

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

```html
flex
```

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

### Problem Identification with Remapped Props

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

Demonstrates how remapping className to style props can lead to platform-specific rendering differences due to style specificity.

```javascript
function MyText({ style }) {
  return <Text {...props} style={[{ color: 'black' }, style]} />;
}
 
remapProps(MyText, { className: 'style' })
 
<MyText style={{ color: 'red' }}>The text will be red on all platforms</MyText>
<MyText className="text-red-500">What color should I render as?</MyText>
```

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

### Max-Width Utilities

Source: https://www.nativewind.dev/docs/tailwind/sizing/max-width

Lists common max-width utility classes and their support status in NativeWind.

```markdown
max-w-0
| ✅ Full Support
```

```markdown
max-w-[n]
| ✅ Full Support
```

```markdown
max-w-{n}
| ✅ Full Support
```

```markdown
max-w-full
| ✅ Full Support
```

```markdown
max-w-screen-sm
| ✅ Full Support
```

```markdown
max-w-screen-md
| ✅ Full Support
```

```markdown
max-w-screen-lg
| ✅ Full Support
```

```markdown
max-w-screen-xl
| ✅ Full Support
```

```markdown
max-w-screen-2xl
| ✅ Full Support
```

```markdown
max-w-min
| 🌐 Web only
```

```markdown
max-w-max
| 🌐 Web only
```

```markdown
max-w-fit
| 🌐 Web only
```

```markdown
max-w-prose
| 🌐 Web only
```

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

### Positioning Utilities

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

These classes control the positioning of elements. Use `-n` for theme values and `-[n]` for arbitrary values. Some utilities are web-only.

```html
inset-{n}
inset-[n]
inset-x-{n}
inset-y-[n]
top-{n}
top-[n]
bottom-{n}
bottom-[n]
left-{n}
left-[n]
right-{n}
right-[n]
inset-auto
inset-x-auto
inset-y-auto
top-auto
bottom-auto
left-auto
right-auto
```

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

### Using fontScale for Scaled Font Sizes

Source: https://www.nativewind.dev/docs/customization/theme

The `fontScale` helper scales values based on the user's font size preference. Provide a number to multiply `PixelRatio.getFontScale()` by, or call it without arguments to get the raw value.

```javascript
const { fontScale } = require("nativewind/theme");

module.exports = {
  theme: {
    extend: {
      fontSize: {
        custom: fontScale(2),
      },
    },
  },
};
```

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

### Aspect Ratio Utilities

Source: https://www.nativewind.dev/docs/tailwind/layout/aspect-ratio

Use these classes to set the aspect ratio of an element. `aspect-auto` respects the element's natural ratio, `aspect-video` sets a 16:9 ratio, `aspect-square` sets a 1:1 ratio, and `aspect-[n]` allows arbitrary values.

```html
aspect-auto
aspect-video
aspect-square
aspect-[n]
aspect-{n}
```

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

### Add Tailwind Directives to CSS

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

Create a global CSS file and include the Tailwind directives: @tailwind base, @tailwind components, and @tailwind utilities.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Configure Packages to Transpile in next.config.js

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

Add `nativewind` and `react-native-css-interop` to the `transpilePackages` array in your `next.config.js` to ensure they are correctly processed by Next.js.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["nativewind", "react-native-css-interop"],
}

```

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

### Visible Class Support

Source: https://www.nativewind.dev/docs/tailwind/layout/visibility

The 'visible' class is fully supported on native platforms.

```html
visible
```

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

### Place Content Around

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

Use `place-content-around` to distribute items evenly along the main axis with equal space around each item. This utility is only supported on the web.

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

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

### Outline Utility

Source: https://www.nativewind.dev/docs/tailwind/borders/outline-style

Use the `outline` utility to apply a default outline to elements. Supported on web only.

```html
outline
```

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

### Arbitrary Duration Class Format

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

Shows the format for specifying arbitrary transition duration values.

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

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

### Divide Width Utilities Compatibility

Source: https://www.nativewind.dev/docs/tailwind/borders/divide-width

These divide width utilities are only supported on the web. The `{n}` notation supports values from the theme, while `-[n]` supports arbitrary values.

```html
divide-x-{n}

```

```html
divide-x-[n]

```

```html
divide-y-{n}

```

```html
divide-y-[n]

```

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

### Enable textOpacity Core Plugin

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

Enable the textOpacity core plugin in your tailwind.config.js file if you need to dynamically change text opacity.

```javascript
module.exports = {
  /* ...  */
  corePlugin: {
    textOpacity: true,
  },
};
```

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

### Dynamically Scale Text with CSS Variables and Classes

Source: https://www.nativewind.dev/docs/tailwind/typography/font-size

Use CSS variables and media queries within a class to scale text based on screen width. NativeWind requires a class for media queries on `:root`.

```css
@media (min-width: 640px) {
  .text-root {
    --font-size-dynamic: 16px;
  }
}
 
@media (min-width: 768px) {
  .text-root {
    --font-size-dynamic: 18px;
  }
}
```

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

### User Select Utilities

Source: https://www.nativewind.dev/docs/tailwind/interactivity/user-select

These classes control the text selection behavior. They are only supported on the web.

```html
<div class="select-none">No selection allowed</div>
<div class="select-text">Text can be selected</div>
<div class="select-all">All text can be selected</div>
<div class="select-auto">Default selection behavior</div>
```

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

### Create a Button Component with Variants

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

Build a component with different visual styles (variants) by mapping variant names to specific class names. This allows for flexible styling based on component state or type.

```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 }
    />
  );
}
```

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

### Table Display (Web Only)

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

Use the `table` class to display elements as table cells. This is supported on the web only.

```html
table
```

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

### Object Fit Utilities

Source: https://www.nativewind.dev/docs/tailwind/layout/object-fit

These classes control how an element's content scales to fit its container. They are only supported on the web.

```html
object-contain
```

```html
object-cover
```

```html
object-fill
```

```html
object-none
```

```html
object-scale-down
```

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

### Using hairlineWidth for Thin Borders

Source: https://www.nativewind.dev/docs/customization/theme

The `hairlineWidth` helper provides the equivalent of `StyleSheet.hairlineWidth` for defining very thin borders in your theme.

```javascript
const { hairlineWidth } = require("nativewind/theme");

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        hairline: hairlineWidth(),
      },
    },
  },
};
```

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

### Min-Height Utilities

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

Lists the Min-Height utility classes and their support status in NativeWind. 'Web only' indicates features not yet supported on native platforms.

```markdown
min-h-0

```

```markdown
min-h-[n]

```

```markdown
min-h-full

```

```markdown
min-h-min

```

```markdown
min-h-max

```

```markdown
min-h-fit

```

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

### Configure Metro Bundler for Nativewind

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

Modify or create metro.config.js to include Nativewind's Metro configuration, specifying the input CSS file.

```javascript
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");
 
const config = mergeConfig(getDefaultConfig(__dirname), {
  /* your config */
});
 
module.exports = withNativeWind(config, { input: "./global.css" });
```

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

### Duration Class Format

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

Shows the format for specifying transition duration using theme values.

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

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

### Position Utilities Compatibility

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

Lists the position utility classes and their support status on web and native platforms. Use these classes to control the positioning of elements.

```html
absolute
```

```html
relative
```

```html
fixed
```

```html
sticky
```

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

### Columns Class Compatibility

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

Shows the compatibility of `columns-[n]` and `columns-{n}` classes. These classes are only supported on the web.

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

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

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

### Text Indent Class Syntax

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

Use `indent-[n]` for theme values and `indent-{n}` for arbitrary values. Both are supported on the web only.

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

```html
```
indent-{n}
```
```

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

### Cursor Utilities for Arbitrary Values

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

Use cursor-[n] to apply arbitrary cursor styles. This is supported on the web.

```html
cursor-[n]
```

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

### Scroll Smooth Utility

Source: https://www.nativewind.dev/docs/tailwind/interactivity/scroll-behaviour

Use the `scroll-smooth` class to enable smooth scrolling behavior. This utility is supported on web platforms only.

```html
scroll-smooth
```

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

### Auto Padding Utility Classes

Source: https://www.nativewind.dev/docs/tailwind/spacing/padding

Details padding utility classes that support 'auto' values, noting their web-only compatibility.

```html
p-auto
```

```html
px-auto
```

```html
py-auto
```

```html
pt-auto
```

```html
pr-auto
```

```html
pb-auto
```

```html
pl-auto
```

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

### Create a Component with Default Styles

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

Define a component with default styles by merging the className prop with predefined styles. This is useful for setting base text colors or other common attributes.

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

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

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

### Enable Divide Opacity Core Plugin

Source: https://www.nativewind.dev/docs/tailwind/borders/divide-color

To enable dynamic opacity control for divide colors on native platforms, add this configuration to your `tailwind.config.js` file. This allows the use of the `--tw-divide-opacity` variable.

```javascript
module.exports = {
  /* ...  */
  corePlugin: {
    divideOpacity: true,
  },
};
```

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

### Configure Metro with NativeWind

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

Use the `withNativeWind` higher-order component to integrate NativeWind into your Metro bundler configuration. Specify the relative path to your CSS file using the `input` option.

```javascript
import { withNativeWind } from "native-wind/metro";
 
module.exports = withNativeWind(config, {
  input: "<relative path to your .css file>",
});
```

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

### Tailwind CSS Grow Utility

Source: https://www.nativewind.dev/docs/tailwind/flexbox/flex-grow

Use the 'grow' utility to allow a flex item to grow and fill any available space. This is useful for making items expand to fill their container.

```html
class="grow"
```

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

### Arbitrary Border Width Utilities

Source: https://www.nativewind.dev/docs/tailwind/borders/border-width

Set arbitrary border widths using square brackets. Use classes like `border-[n]` where `[n]` is any valid CSS length value.

```html
border-[n]
```

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

### Gap Utilities Compatibility

Source: https://www.nativewind.dev/docs/tailwind/flexbox/gap

Lists the supported Tailwind CSS gap utility classes and their compatibility status. Supports theme-based and arbitrary values.

```html
gap-{n}
```

```html
gap-[n]
```

```html
gap-x-{n}
```

```html
gap-x-[n]
```

```html
gap-y-{n}
```

```html
gap-y-[n]
```

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

### Using env() for Safe Area Insets

Source: https://www.nativewind.dev/docs/core-concepts/functions-and-directives

Access device-specific environment information like safe area insets using the env() CSS function.

```css
env(safe-area-inset-top);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
env(safe-area-inset-right);
```

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

### List-Item Display (Web Only)

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

Use the `list-item` class to display elements as list items. This is supported on the web only.

```html
list-item
```

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

### Arbitrary Transition Delay Class

Source: https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay

Use the `delay-[n]` class to apply an arbitrary transition delay value. This feature also has experimental support on native platforms.

```html
delay-[n]
```

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

### Container Query Syntax Support

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

NativeWind provides full support for the core container query syntax and its variations.

```css
@container
```

```css
@container/{name}
```

```css
@{size}/{name}:{modifier}
```

```css
@container-normal
```

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

### Place Content Baseline

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

Use `place-content-baseline` to align items such that their baselines are aligned. This utility is only supported on the web.

```html
place-content-baseline
```

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

### Transition Delay Class

Source: https://www.nativewind.dev/docs/tailwind/transitions-animation/transition-delay

Use the `delay-{n}` class to apply a transition delay based on theme values. This feature has experimental support on native platforms.

```html
delay-{n}
```

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

### Invisible Class Support

Source: https://www.nativewind.dev/docs/tailwind/layout/visibility

The 'invisible' class is fully supported on native platforms.

```html
invisible
```

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

### Text Decoration Style Utilities

Source: https://www.nativewind.dev/docs/tailwind/typography/text-decoration-style

These classes are used to set the style of text decorations. Compatibility varies by platform.

```html
decoration-solid
```

```html
decoration-double
```

```html
decoration-dotted
```

```html
decoration-dashed
```

```html
decoration-wavy
```

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

### Content None Class

Source: https://www.nativewind.dev/docs/tailwind/typography/content

Demonstrates the 'content-none' class, which is supported on the web only.

```html
content-none
```

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

### Inline-Grid Display (Web Only)

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

Use the `inline-grid` class for inline grid layouts. This is supported on the web only.

```html
inline-grid
```

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

### Compile Tailwind CSS

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

Use the Tailwind CLI to compile your input CSS file into an output CSS file. Ensure your input file contains the @import 'tailwindcss'; directive.

```bash
npx tailwindcss --input ./global.css --output output.css
```

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

### Rotate Class Compatibility

Source: https://www.nativewind.dev/docs/tailwind/transforms/rotate

Shows the compatibility of rotate-{n} and rotate-[n] classes with NativeWind. Both are fully supported.

```html
rotate-{n}
```

```html
rotate-[n]
```

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

### Configure Platform-Specific Colors

Source: https://www.nativewind.dev/docs/customization/colors

Use `platformSelect` and `platformColor` to define colors that adapt to the native platform (iOS, Android) or fall back to a default value.

```javascript
// tailwind.config.js

const { platformSelect, platformColor } = require("nativewind/theme");

module.exports = {
  theme: {
    extend: {
      colors: {
        error: platformSelect({
          // Now you can provide platform specific values
          ios: platformColor("systemRed"),
          android: platformColor("?android:colorError"),
          default: "red",
        }),
      },
    },
  },
};
```

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

### Configure platform-specific fonts in tailwind.config.js

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

Use the platformSelect helper to map font names to specific platforms within the theme configuration.

```javascript
const { platformSelect } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: platformSelect({
          ios: "Inter-Bold",
          android: "Inter-Bold",
          default: "ui-sans-serif",
        }),
      },
    },
  },
};
```

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

### Inline-Flex Display (Web Only)

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

Use the `inline-flex` class for inline flex containers. This is supported on the web only.

```html
inline-flex
```

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

### Place Content Center

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

Use `place-content-center` to center items along both the main and cross axes in a flex container. This utility is only supported on the web.

```html
place-content-center
```

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

### Grid Columns None

Source: https://www.nativewind.dev/docs/tailwind/flexbox/grid-template-columns

Use this class to reset the grid columns. This is only supported on the web.

```html
grid-cols-none
```

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

### Combine Multiple Pseudo-classes

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

Multiple pseudo-classes can be chained together. All specified conditions must be met for the styles to apply.

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

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

### Wrap App with SafeAreaProvider (Native)

Source: https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets

Wrap your entire application with `SafeAreaProvider` from `react-native-safe-area-context` to enable safe area insets. Use the `p-safe` Tailwind class on a View component to apply padding based on safe area insets.

```jsx
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";

export function MyApp(props) {
  // Make sure you have the SafeAreaProvider at the root of your app
  return (
    <SafeAreaProvider>
      <View className="p-safe" {...props} />
    </SafeAreaProvider>
  );
}
```

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

### Collapse Class Support

Source: https://www.nativewind.dev/docs/tailwind/layout/visibility

The 'collapse' class is only supported on the web and not on native platforms.

```html
collapse
```

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

### Whitespace Pre-wrap Class

Source: https://www.nativewind.dev/docs/tailwind/typography/whitespace

Use `whitespace-pre-wrap` to preserve whitespace and wrap lines. This utility is only supported on the web.

```html
whitespace-pre-wrap
```

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

### Arbitrary Value Margin Classes

Source: https://www.nativewind.dev/docs/tailwind/spacing/margin

Lists margin utility classes that support arbitrary values.

```markdown
m-[n]
```

```markdown
mx-[n]
```

```markdown
my-[n]
```

```markdown
mt-[n]
```

```markdown
mr-[n]
```

```markdown
mb-[n]
```

```markdown
ml-[n]
```

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

### Margin Utility Classes

Source: https://www.nativewind.dev/docs/tailwind/spacing/margin

Lists standard margin utility classes that support values from the theme.

```markdown
m-{n}
```

```markdown
mx-{n}
```

```markdown
my-{n}
```

```markdown
mt-{n}
```

```markdown
mr-{n}
```

```markdown
mb-{n}
```

```markdown
ml-{n}
```

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

### Configure Metro Bundler for Nativewind in NX

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

Add the Nativewind plugin to your `metro.config.js` file. This ensures Nativewind is correctly integrated with your NX monorepo's build process.

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

// ... existing Nx configuration

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