### Install react-native-tailwindcss

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/README.md

Provides instructions for installing the `react-native-tailwindcss` package using either npm or Yarn package managers.

```bash
# Using npm
npm install react-native-tailwindcss

# Using Yarn
yarn add react-native-tailwindcss
```

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

### Install react-native-tailwindcss using npm

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Installs the react-native-tailwindcss package using npm. This is the primary method for adding the library to your React Native project.

```bash
npm install react-native-tailwindcss
```

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

### Install react-native-tailwindcss with Yarn

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

This command adds the react-native-tailwindcss package to your project dependencies using Yarn. Ensure Yarn is installed and configured for your project.

```bash
yarn add react-native-tailwindcss
```

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

### Add Start Padding with t.pS{Size}

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Apply padding to the start side of an element using the t.pS{Size} utility. This example shows t.pS8, adding 32 units of padding to the start.

```plaintext
t.pS8
```

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

### Placeholder and Text Color Configuration

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures placeholder color and text color utilities by referencing the defined 'colors' in the theme. Allows for consistent color application.

```javascript
placeholderColor: theme => theme('colors'),
    textColor: theme => theme('colors')
```

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

### Usage Examples for Letter Spacing

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/typography/letter-spacing.md

These examples demonstrate how to apply the 'tracking' utilities to control letter spacing in React Native components. Each example shows a different letter spacing class applied to text, illustrating the visual effect.

```html
<div class="mb-6">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingTighter</p>
  <p class="tracking-tighter text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="mb-6">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingTight</p>
  <p class="tracking-tight text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="mb-6">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingNormal</p>
  <p class="tracking-normal text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="mb-6">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingWide</p>
  <p class="tracking-wide text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
<div class="mb-6">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingWider</p>
  <p class="tracking-wider text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
<div>
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.trackingWidest</p>
  <p class="tracking-widest text-lg text-gray-800">The quick brown fox jumped over the lazy dog.</p>
</div>
```

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

### Padding Configuration based on Spacing

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Sets padding utilities to use the same values defined in the 'spacing' theme. Provides consistent internal spacing for elements.

```javascript
padding: theme => theme('spacing')
```

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

### Example Usage of max-width Utility (Plain Text)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/sizing/max-width.md

This snippet shows a practical example of applying a 'max-width' utility class generated by react-native-tailwindcss. It illustrates how a specific maximum width ('maxWMd') is applied to a div element, centering it and adding padding and background color for visual demonstration.

```plaintext
<div class="max-w-md mx-auto text-center p-6 bg-gray-300">
  <span class="rnt-object">t</span><span>.maxWMd</span>
</div>
```

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

### Width Configuration with Ratios and Screen Units

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures width utilities, including fractions of parent elements ('1/2', '1/3'), and viewport width ('screen'). Extends theme spacing for flexible sizing.

```javascript
width: theme => ({
      auto: 'auto',
      ...theme('spacing'),
      '1/2': '50%',
      '1/3': '33.333333%',
      '2/3': '66.666667%',
      '1/4': '25%',
      '2/4': '50%',
      '3/4': '75%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '1/6': '16.666667%',
      '2/6': '33.333333%',
      '3/6': '50%',
      '4/6': '66.666667%',
      '5/6': '83.333333%',
      '1/12': '8.333333%',
      '2/12': '16.666667%',
      '3/12': '25%',
      '4/12': '33.333333%',
      '5/12': '41.666667%',
      '6/12': '50%',
      '7/12': '58.333333%',
      '8/12': '66.666667%',
      '9/12': '75%',
      '10/12': '83.333333%',
      '11/12': '91.666667%',
      full: '100%',
      screen: '100vw',
    })
```

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

### Align Content: Start Utility

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/align-content.md

Uses the `contentStart` utility to pack lines in a flex container against the start of the cross axis. This is useful for controlling the vertical alignment of text lines or flex items in a multi-line container.

```html
<div class="flex content-start flex-wrap bg-gray-200 h-48">
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="w-1/3 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>
```

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

### Height Configuration with Ratios and Screen Units

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures height utilities, including fractions of parent elements ('1/2', '1/3'), and viewport height ('screen'). Leverages theme spacing for consistency.

```javascript
height: theme => ({
      auto: 'auto',
      ...theme('spacing'),
      '1/2': '50%',
      '1/3': '33.333333%',
      '2/3': '66.666667%',
      '1/4': '25%',
      '2/4': '50%',
      '3/4': '75%',
      '1/5': '20%',
      '2/5': '40%',
      '3/5': '60%',
      '4/5': '80%',
      '1/6': '16.666667%',
      '2/6': '33.333333%',
      '3/6': '50%',
      '4/6': '66.666667%',
      '5/6': '83.333333%',
      '1/12': '8.333333%',
      '2/12': '16.666667%',
      '3/12': '25%',
      '4/12': '33.333333%',
      '5/12': '41.666667%',
      '6/12': '50%',
      '7/12': '58.333333%',
      '8/12': '66.666667%',
      '9/12': '75%',
      '10/12': '83.333333%',
      '11/12': '91.666667%',
      full: '100%',
      screen: '100vh',
    })
```

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

### Opacity Level Definitions

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures opacity utilities from '0' (0%) to '100' (100%), allowing for transparency control on elements.

```javascript
opacity: {
      '0': '0',
      '25': '0.25',
      '50': '0.5',
      '75': '0.75',
      '100': '1',
    }
```

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

### React Native TailwindCSS: Align Self Start Example

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/align-self.md

Shows how to use the 'selfStart' utility to align a flex item to the start of the flex container's cross axis, overriding the 'alignItems' value. This is useful for specific layout control in React Native.

```jsx
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="self-start flex-1 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
```

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

### Z-Index Utility Usage Example (HTML/CSS)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/layout/z-index.md

This example showcases the practical application of z-index utility classes in a React Native context. It displays several stacked elements with different z-index values, illustrating how to control their stacking order visually.

```html
<div class="relative h-32 text-center">
  <div class="z-50 absolute w-24 h-24 -ml-2 -mt-2 bg-gray-300 flex justify-center items-center">z50</div>
  <div class="z-40 absolute w-24 h-24 ml-0 mt-0 bg-gray-400 flex justify-center items-center">z40</div>
  <div class="z-30 absolute w-24 h-24 ml-2 mt-2 bg-gray-500 flex justify-center items-center">z30</div>
  <div class="z-20 absolute w-24 h-24 ml-4 mt-4 bg-gray-600 flex justify-center items-center">z20</div>
  <div class="z-10 absolute w-24 h-24 ml-6 mt-6 bg-gray-700 flex justify-center items-center">z10</div>
  <div class="z-0 absolute w-24 h-24 ml-8 mt-8 bg-gray-800 flex justify-center items-center">z0</div>
</div>
```

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

### Apply Vertical Padding (Example)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Illustrates applying vertical padding (top and bottom) to a React Native component using the t.pY{Size} utility. An example, t.pY8, adds 32 units of padding to both the top and bottom of an element.

```plaintext
t.pY8
```

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

### Example Tailwind Configuration (JS)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/customization/configuration.md

Demonstrates a `tailwind.config.js` file with custom font families, extended colors, and spacing options. This configuration allows for bespoke user interface design.

```javascript
// Example `tailwind.config.js` file

module.exports = {
  theme: {
    fontFamily: {
      display: 'Gilroy',
      body: 'Graphik',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
}
```

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

### RTL Text Alignment Example

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/typography/text-align.md

Demonstrates how to align text to the right using TailwindCSS classes for RTL layouts in React Native. This example utilizes the `text-right` class to ensure text is properly displayed in an RTL context.

```html
<div class="mb-6 bg-gray-200 rounded p-2">
  <p class="text-sm text-gray-600"><span class="rnt-object">t</span>.textAuto</p>
  <p class="text-right text-base text-gray-800">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.</p>
</div>
```

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

### Min Height and Width Constraints

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Defines minimum height and width utilities, including '0' and 'full' (100%) or viewport dimensions ('screen'). Ensures elements meet minimum size requirements.

```javascript
minHeight: {
      '0': '0',
      full: '100%',
      screen: '100vh',
    },
    minWidth: {
      '0': '0',
      full: '100%',
    }
```

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

### Inset Configuration (Positioning)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Defines values for inset properties (top, right, bottom, left) using 'auto' and theme-defined spacing. Essential for absolute and fixed positioning.

```javascript
inset: {
      auto: 'auto',
      ...theme('spacing'),
    }
```

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

### React Native TailwindCSS: Align items Start

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/align-items.md

Demonstrates how to use `t.itemsStart` to align flex items to the start of the container's cross axis. This utility is part of the React Native TailwindCSS library for styling flexbox layouts.

```javascript
t.itemsStart
```

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

### Apply Start Margin (React Native)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/margin.md

Applies a specified margin to the start of an element, respecting text direction. The utility format is t.m{S}{Size}, where {S} indicates start margin. For instance, t.mS1 adds 4 units of margin to the start.

```jsx
<span class="m-0">{{ directionItem }}: {{ value[1] }} </span>
```

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

### Z-Index Utilities

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Defines z-index scale values from '0' to '100' for controlling element stacking order. Includes 'auto' for default behavior.

```javascript
zIndex: {
      auto: 'auto',
      '0': '0',
      '10': '10',
      '20': '20',
      '30': '30',
      '40': '40',
      '50': '50',
      '60': '60',
      '70': '70',
      '80': '80',
      '90': '90',
      '100': '100',
    }
```

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

### Example Input with Border Color Styling

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/borders/border-color.md

Demonstrates how to apply border color utilities to an input element. This example uses `border`, `border-red-500`, and `bg-white` classes to style an input field, showcasing a practical application of the border color utilities.

```html
<div class="max-w-xs w-full mx-auto">
  <input class="border border-red-500 bg-white text-gray-900 appearance-none block w-full text-gray-900 border rounded py-3 px-4 focus:outline-none" placeholder="Your email">
</div>
```

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

### React Native TailwindCSS: Flex Wrap Examples

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/flex-wrap.md

Demonstrates the usage of flex wrap utilities in React Native. These examples showcase how to prevent flex items from wrapping, allow normal wrapping, and enable wrapping in the reverse direction using the library's API.

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

const App = () => {
  return (
    <View>
      {/* Don't wrap example */}
      <Text>Don't wrap</Text>
      <View className="flex flex-no-wrap bg-gray-200">
        <View className="w-2/5 flex-none p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">1</View>
        </View>
        <View className="w-2/5 flex-none p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">2</View>
        </View>
        <View className="w-2/5 flex-none p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">3</View>
        </View>
      </View>

      {/* Wrap normally example */}
      <Text>Wrap normally</Text>
      <View className="flex flex-wrap bg-gray-200">
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">1</View>
        </View>
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">2</View>
        </View>
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">3</View>
        </View>
      </View>

      {/* Wrap reversed example */}
      <Text>Wrap reversed</Text>
      <View className="flex flex-wrap-reverse bg-gray-200">
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">1</View>
        </View>
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">2</View>
        </View>
        <View className="w-2/5 p-2">
          <View className="text-gray-700 text-center bg-gray-400 p-2">3</View>
        </View>
      </View>
    </View>
  );
};

export default App;

```

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

### React Native TailwindCSS: Flex Grow Example

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/flex-grow.md

Demonstrates how to use the `flexGrow` utility to make a flex item expand and fill available space. This utility is part of the react-native-tailwindcss library.

```javascript
import React from 'react';
import { View, Text } from 'react-native';
import { TailwindProvider } from 'react-native-tailwindcss';

const App = () => (
  <TailwindProvider>
    <View className="flex bg-gray-200">
      <View className="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        Content that cannot flex
      </View>
      <View className="flex-grow text-gray-800 text-center bg-gray-500 px-4 py-2 m-2">
        Item that will grow
      </View>
      <View className="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
        Content that cannot flex
      </View>
    </View>
  </TailwindProvider>
);

export default App;
```

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

### Apply min-width utility in React Native component

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/sizing/min-width.md

Example of applying the '.minWFull' utility class to a React Native component to set its minimum width to '100%'. This demonstrates a practical usage scenario for the generated utility.

```html
<div class="w-24 min-w-full text-center p-6 bg-gray-300">
  <span class="rnt-object">t</span><span>.minWFull</span>
</div>
```

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

### Justify Content: Start

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/justify-content.md

Aligns flex items to the start of the container's main axis. Uses the `justify-content: flex-start` CSS property. The code snippet demonstrates the usage of `t.justifyStart`.

```javascript
t.justifyStart
```

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

### Default Tailwind CSS Configuration for React Native

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

A sample tailwind.config.js file generated for react-native-tailwindcss. It includes default color palettes, spacing scales, and other utility configurations suitable for React Native development.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',

      black: '#000',
      white: '#fff',

      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
      red: {
        100: '#fff5f5',
        200: '#fed7d7',
        300: '#feb2b2',
        400: '#fc8181',
        500: '#f56565',
        600: '#e53e3e',
        700: '#c53030',
        800: '#9b2c2c',
        900: '#742a2a',
      },
      orange: {
        100: '#fffaf0',
        200: '#feebc8',
        300: '#fbd38d',
        400: '#f6ad55',
        500: '#ed8936',
        600: '#dd6b20',
        700: '#c05621',
        800: '#9c4221',
        900: '#7b341e',
      },
      yellow: {
        100: '#fffff0',
        200: '#fefcbf',
        300: '#faf089',
        400: '#f6e05e',
        500: '#ecc94b',
        600: '#d69e2e',
        700: '#b7791f',
        800: '#975a16',
        900: '#744210',
      },
      green: {
        100: '#f0fff4',
        200: '#c6f6d5',
        300: '#9ae6b4',
        400: '#68d391',
        500: '#48bb78',
        600: '#38a169',
        700: '#2f855a',
        800: '#276749',
        900: '#22543d',
      },
      teal: {
        100: '#e6fffa',
        200: '#b2f5ea',
        300: '#81e6d9',
        400: '#4fd1c5',
        500: '#38b2ac',
        600: '#319795',
        700: '#2c7a7b',
        800: '#285e61',
        900: '#234e52',
      },
      blue: {
        100: '#ebf8ff',
        200: '#bee3f8',
        300: '#90cdf4',
        400: '#63b3ed',
        500: '#4299e1',
        600: '#3182ce',
        700: '#2b6cb0',
        800: '#2c5282',
        900: '#2a4365',
      },
      indigo: {
        100: '#ebf4ff',
        200: '#c3dafe',
        300: '#a3bffa',
        400: '#7f9cf5',
        500: '#667eea',
        600: '#5a67d8',
        700: '#4c51bf',
        800: '#434190',
        900: '#3c366b',
      },
      purple: {
        100: '#faf5ff',
        200: '#e9d8fd',
        300: '#d6bcfa',
        400: '#b794f4',
        500: '#9f7aea',
        600: '#805ad5',
        700: '#6b46c1',
        800: '#553c9a',
        900: '#44337a',
      },
      pink: {
        100: '#fff5f7',
        200: '#fed7e2',
        300: '#fbb6ce',
        400: '#f687b3',
        500: '#ed64a6',
        600: '#d53f8c',
        700: '#b83280',
        800: '#97266d',
        900: '#702459',
      },
    },
    spacing: { // as only the needed attributes get called you can add as much as you want
      px: '1px',
      '0': '0',
      '1': '0.25rem',
      '2': '0.5rem',
      '3': '0.75rem',
      '4': '1rem',
      '5': '1.25rem',
      '6': '1.5rem',
      '8': '2rem',
      '10': '2.5rem',
      '12': '3rem',
      '16': '4rem',
      '20': '5rem',
      '24': '6rem',
      '32': '8rem',
      '40': '10rem',
      '48': '12rem',
      '56': '14rem',
      '64': '16rem',
    },
    backgroundColor: theme => theme('colors'),
    borderColor: theme => ({
      ...theme('colors'),
      default: theme('colors.gray.300', 'currentColor'),
    }),
    borderRadius: {
      none: '0',
      sm: '0.125rem',
      default: '0.25rem',
      lg: '0.5rem',
      full: '9999px',
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
      '8': '8px',
    },
    boxShadow: {
      default: '0 1px 3px rgba(0, 0, 0, 0.1), 1,5',
      md: '0 4px 6px rgba(0, 0, 0, 0.1), 3',
      lg: '0 10px 15px rgba(0, 0, 0, 0.1), 7.5',
      xl: '0 20px 25px rgba(0, 0, 0, 0.1), 12.5',
      '2xl': '0 25px 50px rgba(0, 0, 0, 0.25), 25',
      outline: '0 0 3px rgba(66, 153, 225, 0.5), 1.5',
      none: 'none',
    },
    flex: {
      '0': '0',
      '1': '1',
      initial: '0',
      none: 'none',
    },
    flexGrow: {
      '0': '0',
      default: '1',
    },
    flexShrink: {
      '0': '0',
      default: '1',
    },
    fontFamily: {
      sans: 'Arial',
      serif: 'Georgia',
      mono: 'Courier New',
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',

```

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

### Apply Outer Box Shadows (iOS Example)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/effects/box-shadow.md

This section illustrates how to apply different outer box shadow sizes to elements using the `t.shadow`, `t.shadowMd`, `t.shadowLg`, `t.shadowXl`, and `t.shadow2xl` utilities. It provides visual examples of how these shadows appear on iOS.

```html
## Outer shadow

Use the <code class="language-plaintext"><span class="rnt-object">t</span>.shadow</code>, 
<code class="language-plaintext"><span class="rnt-object">t</span>.shadowMd</code>, 
<code class="language-plaintext"><span class="rnt-object">t</span>.shadowLg</code>, 
<code class="language-plaintext"><span class="rnt-object">t</span>.shadowXl</code>, 
or <code class="language-plaintext"><span class="rnt-object">t</span>.shadow2xl</code> utilities to apply different sized outer box shadows to an element.

#### iOS

<div class="flex flex-wrap justify-between items-center bg-gray-200 rounded p-8">
    <div class="text-center px-2">
      <div class="mb-1 text-xs text-gray-600">base</div>
      <div class="h-8 w-8 text-xs bg-white rounded p-4" style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)"></div>
    </div>
    <div class="text-center px-2">
      <div class="mb-1 text-xs text-gray-600">md</div>
      <div class="h-10 w-10 text-xs bg-white rounded p-4" style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)"></div>
    </div>
    <div class="text-center px-2">
      <div class="mb-1 text-xs text-gray-600">lg</div>
      <div class="h-12 w-12 text-xs bg-white rounded p-4" style="box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)"></div>
    </div>
    <div class="text-center px-2">
      <div class="mb-1 text-xs text-gray-600">xl</div>
      <div class="h-16 w-16 text-xs bg-white rounded p-4" style="box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)"></div>
    </div>
    <div class="text-center px-2">
      <div class="mb-1 text-xs text-gray-600">2xl</div>
      <div class="h-20 w-20 text-xs bg-white rounded p-4" style="box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)"></div>
    </div>
</div>

```

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

### Margin Configuration with Negative Values

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Defines margin utilities, including 'auto' and spacing values from the theme. Supports negative margins by utilizing a negative value helper.

```javascript
margin: (theme, { negative }) => ({
      auto: 'auto',
      ...theme('spacing'),
      ...negative(theme('spacing')),
    })
```

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

### Responsive Breakpoints and Font Sizes

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Defines custom responsive breakpoints (e.g., 'lg', 'xl') and corresponding font sizes for various screen sizes in rem units. Used for creating adaptive UIs.

```javascript
responsive: {
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
    }
```

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

### Apply Text Shadows with Utilities

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/effects/text-shadow.md

This example demonstrates how to apply different text shadow sizes using utility classes directly in HTML. It showcases the usage of predefined classes like `t.textShadow`, `t.textShadowMd`, and `t.textShadowLg` to style text elements with varying shadow effects.

```html
<p class="m-0 mb-1 text-gray-300" style="text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)">base</p>
<p class="m-0 mb-1 text-gray-300" style="text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)">md</p>
<p class="m-0 mb-1 text-gray-300" style="text-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)">lg</p>
<p class="m-0 mb-1 text-gray-300" style="text-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)">xl</p>
<p class="m-0 mb-1 text-gray-300" style="text-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)">2xl</p>
```

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

### Apply Text Alignment Utilities

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/typography/text-align.md

These examples show how to apply text alignment utilities provided by react-native-tailwindcss to elements. The utilities include textAuto, textLeft, textCenter, textRight, and textJustify.

```plaintext
t.textAuto
```

```plaintext
t.textLeft
```

```plaintext
t.textCenter
```

```plaintext
t.textRight
```

```plaintext
t.textJustify
```

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

### Example: Visible Overflow

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/layout/overflow.md

A React Native component demonstrating the `overflow-visible` style, allowing content to break out of its container.

```jsx
<div class="overflow-hidden h-24">
  <div class="overflow-visible h-16 bg-gray-400 text-gray-700 p-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
  </div>
</div>
```

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

### React Native Inline Styling Example

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/index.md

Illustrates the use of inline styling in React Native by passing style objects directly to the `style` prop. While this increases development speed and simplifies code management, it can lead to verbose and repetitive code.

```jsx
render() {
    return (
        <View style={[{justifyContent: 'center'}, {alignItems: 'center'}, {padding: 12}]}>
            <Text style={[{textAlign: 'center'}, {fontWeight: 'bold'}]}>
                description of the product
            </Text>
        </View>
    )
}
```

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

### Max Height and Width Constraints

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures maximum height and width utilities, including 'full' (100%) and viewport dimensions ('screen'). Prevents elements from exceeding specified bounds.

```javascript
maxHeight: {
      full: '100%',
      screen: '100vh',
    },
    maxWidth: {
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      full: '100%',
    }
```

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

### Letter Spacing Utilities

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Configures letter-spacing utilities from 'tighter' (-0.05em) to 'widest' (0.1em). Useful for adjusting text readability and style.

```javascript
letterSpacing: {
      tighter: '-0.05em',
      tight: '-0.025em',
      normal: '0',
      wide: '0.025em',
      wider: '0.05em',
      widest: '0.1em',
    }
```

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

### Apply Opacity Utility Classes in Jinja2

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/effects/opacity.md

This Jinja2 snippet illustrates how to apply generated opacity utility classes to React Native components. It loops through opacity values and renders `div` elements, each with a unique opacity class applied, visually demonstrating the effect of different opacity levels. This is helpful for creating examples or previews of UI elements with varying opacities.

```jinja2
<div class="flex -mx-2 my-4">
    {%- for value in page.classes.values -%}
        <div class="text-sm flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 mx-2 opacity-{{ value[0] }}">.opacity{{ value[0] }}</div>
    {%- endfor -%}
</div>
```

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

### Line Height Configuration

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/installation.md

Sets line-height values for text elements, ranging from 'none' (1rem) to 'loose' (2rem). Impacts text readability and vertical spacing.

```javascript
lineHeight: {
      none: '1rem',
      tight: '1.25rem',
      snug: '1.375rem',
      normal: '1.5rem',
      relaxed: '1.625rem',
      loose: '2rem',
    }
```

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

### Define Text Transform Utilities

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/typography/text-transform.md

This snippet defines the configuration for text transform utilities, mapping class names to CSS properties. It's part of the library's setup for applying text casing.

```javascript
classes:
  name: ''
  key: textTransform
  values:
      [
      ['normalCase', "'none'"],
      ['uppercase', "'uppercase'"],
      ['lowercase', "'lowercase'"],
      ['capitalize', "'capitalize'"]
      ]
```

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

### Apply Horizontal Padding (Example)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Shows how to apply horizontal padding (left and right) to a React Native element using the t.pX{Size} utility. For instance, t.pX8 applies 32 units of padding to both the left and right sides.

```plaintext
t.pX8
```

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

### Applying Max Height Utilities (React Native)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/sizing/max-height.md

Demonstrates how to apply the generated max-height utility classes in a React Native component. The example shows setting the maximum height of a view to '100%' using the `t.maxHFull` utility.

```jsx
<div class="h-48 max-h-full p-6 bg-gray-400 flex items-center justify-center">
  <span class="rnt-object">t</span><span>.maxHFull</span>
</div>
```

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

### Apply flex-1 to allow growing/shrinking (React Native)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/flexbox/flex.md

This example demonstrates the use of the `flex-1` utility class in React Native TailwindCSS. It allows a flex item to grow and shrink as needed, effectively ignoring its initial size, which is useful for distributing space equally among items.

```html
<div class="flex bg-gray-200">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Short
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Medium length
  </div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
    Significantly larger amount of content
  </div>
</div>
```

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

### Add Padding to All Sides with t.p{Size}

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Use the t.p{Size} utilities to apply padding to all sides of an element. This example demonstrates t.p8, which applies 32 units of padding.

```plaintext
t.p8
```

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

### Directional Padding (LTR) with t.pS{Size} and t.pE{Size}

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Demonstrates directional padding in a Left-to-Right (LTR) context. t.pS8 adds padding to the start, and t.pE8 adds padding to the end.

```plaintext
t.pS8
```

```plaintext
t.pE8
```

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

### Full Tailwind Configuration Initialization (Bash)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/customization/configuration.md

Command to generate a comprehensive `tailwind.config.js` file that includes all default Tailwind configurations. Use the `--full` flag for complete scaffolding.

```bash
npx tailwind init --full
```

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

### Apply Padding to Single Side (Example)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/spacing/padding.md

Demonstrates how to apply padding to a single side of a React Native component using utility classes like t.pT6, t.pR4, etc. These classes correspond to specific padding values (e.g., 24, 16) on the respective sides.

```plaintext
t.pT6
t.pR4
t.pB8
t.pL2
t.pS1
t.pE0
```

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

### Initialize Tailwind CSS Configuration (Bash)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/customization/configuration.md

Shows how to create a minimal `tailwind.config.js` file using the Tailwind CLI. This command is used to set up the basic configuration structure for a project.

```bash
npx tailwind init
```

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

### Apply Background Color Utility (React Native)

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/backgrounds/background-color.md

Demonstrates how to apply a background color utility class to a React Native component. The example shows a button with a blue background, white text, and rounded corners, achieved by using the `bg-blue-500` class.

```plaintext
<button type="button" class="bg-blue-500 text-white font-semibold px-4 py-2 rounded">
  Button
</button>
```

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

### Apply min-height utilities in React Native

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/sizing/min-height.md

This example shows how to apply minimum height utilities in a React Native component using react-native-tailwindcss. It demonstrates using `min-height: '100%'` to make a child div occupy the full minimum height of its parent.

```jsx
<div class="h-48 p-6 bg-gray-300">
  <div class="h-24 min-h-full p-6 bg-gray-400 flex items-center justify-center">
    <span class="rnt-object">t</span><span>.minHFull</span>
  </div>
</div>
```

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

### Run Tests

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/README.md

Shows the command to execute the test suite for the `react-native-tailwindcss` project.

```bash
npm run test
```

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

### React Native Tailwind CSS Color Swatch Example

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/docs/customization/customizing-colors.md

This snippet shows how to create a visual representation of a color swatch in React Native using Tailwind CSS utility classes. It includes elements for displaying the color's name and its corresponding hex code. This is useful for theme previews or color palette documentation.

```jsx
<div class="flex items-center mt-5"><div class="h-12 w-12 rounded-lg shadow-inner bg-purple-900"></div> 
<div class="ml-2 text-gray-800 text-xs leading-none pl-1"><div class="font-semibold">900</div> 
<div class="mt-1 font-normal opacity-75">#44337A</div></div></div></div>
```

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

### Initialize TailwindCSS Config

Source: https://github.com/tvke/react-native-tailwindcss/blob/master/README.md

Demonstrates the command to generate a new `tailwind.config.js` file for `react-native-tailwindcss`, allowing customization of styles.

```bash
npx RNtailwindcss
```