Usage

Handling Hover, Focus and Other States

How style icons on hover, focus, and more.

The state support on React Native is not complete. Learn more at the NativeWind documentation.

The modifiers can be applied conditionally by adding them to the beginning of the class name that describes the condition you want to target. For example, to apply the border-slate-600 on hover, use hover:border-slate-600:

Hover over the icon and see changes

<div>
<FaMixcloudclassName="size-32 rounded-xl hover:border hover:border-primary-medium" />
</div>

First, last, odd, and even

Using selectors

Not available for React Native. Learn more on the NativeWind official documentation.

Style an icon when it is the first-child or last-child using the first and last modifiers:

<div>
<FaMixcloudclassName="first:bg-background last:border-primary-medium ..." />
<FaMixcloudclassName="first:bg-background last:border-primary-medium ..." />
<FaMixcloudclassName="first:bg-background last:border-primary-medium ..." />
<FaMixcloudclassName="first:bg-background last:border-primary-medium ..." />
</div>

You can also style an icon when it’s an odd or even child using the odd and even modifiers:

<div>
<FaMixcloudclassName="even:bg-background odd:border-primary-medium ..." />
<FaMixcloudclassName="even:bg-background odd:border-primary-medium ..." />
<FaMixcloudclassName="even:bg-background odd:border-primary-medium ..." />
<FaMixcloudclassName="even:bg-background odd:border-primary-medium ..." />
</div>

Styling Based on Parent State

Here you find an example using conditional styling based on the state of the parent element

Hover over the icon and see changes

<div>
<buttonclassName="group/sample ...">
<divclassName="flex">
<FaMixcloudclassName="icon-sky-500 group-hover/sample:icon-white" />
<spanclassName="dark:text-primary font-quicksand group-hover/sample:text-primary-dark">
<span>
rocket
</span>
<spanclassName="font-semibold">
icons
</span>
</span>
</div>
<pclassName="text-primary-light group-hover/sample:text-primary-dark text-sm">
Group state can be used to change style of the icon.
</p>
</button>
</div>

Styling Based on Sibilings State

Here you find an example using conditional styling based on the state of sibling elements.

User permissionAdminUser

<div>
<fieldset>
<legend>
User permission
</legend>
<inputid="admin"className="peer/admin"type="radio"name="permission" />
<TbCheckboxclassName="transition ... peer-hover/admin:opacity-100 peer-checked/admin:opacity-90 peer-checked/admin:icon-sky-500" />
<labelhtmlFor="admin"className="ml-2 peer-checked/admin:text-sky-500">
Admin
</label>
<inputid="user"className="peer/user"type="radio"name="permission" />
<TbCheckboxclassName="transition ... peer-hover/user:opacity-100 peer-checked/user:opacity-90 peer-checked/user:icon-sky-500" />
<labelhtmlFor="user"className="ml-2 peer-checked/user:text-sky-500">
User
</label>
<TbUserQuestionclassName="transition opacity-100 ... peer-checked/admin:opacity-0 peer-checked/user:opacity-0" />
<TbUserStarclassName="transition opacity-0 ... peer-checked/admin:opacity-100" />
<TbUserclassName="transition opacity-0 ... peer-checked/user:opacity-100" />
</fieldset>
</div>