> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# TouchableHighlight

> Learn how to use TouchableHighlight with Uniwind className props

## Overview

The `TouchableHighlight` component provides visual feedback by underlaying a color when pressed. Uniwind provides className prop support for styling this component.

## Styling Convention

<Info>
  **For `style` props:** Use regular Tailwind classes directly (e.g., `className="p-4"`).

  **For non-style props** (like `underlayColor`): Use the `accent-` prefix (e.g., `underlayColorClassName="accent-gray-200"`).
</Info>

<Warning>
  **Since 1.6.2:** Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.
</Warning>

## Uniwind Bindings

<ParamField path="className" type="string">
  Maps to the `style` prop. Use any Tailwind utility classes.
</ParamField>

<ParamField path="underlayColorClassName" type="string">
  Maps to the `underlayColor` prop. Requires `accent-` prefix for color values.
</ParamField>

## State Selectors

TouchableHighlight supports `active:`, `disabled:`, and `focus:` state selectors:

| Selector    | Trigger                                                            |
| ----------- | ------------------------------------------------------------------ |
| `active:`   | When the component is being pressed                                |
| `disabled:` | When the `disabled` prop is `true`                                 |
| `focus:`    | When the component has focus (especially useful for TV navigation) |

## Usage Example

```tsx theme={null}
import { TouchableHighlight, Text } from 'react-native'

<TouchableHighlight
  className="bg-blue-500 px-6 py-3 rounded-lg focus:ring-2 focus:ring-blue-300"
  underlayColorClassName="accent-blue-600 dark:accent-blue-700"
  onPress={() => console.log('Pressed')}
>
  <Text className="text-white text-center font-semibold">Press me</Text>
</TouchableHighlight>
```