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><FaVialsclassName="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><FaVialsclassName="first:bg-background last:border-primary-medium ..." /><FaVialsclassName="first:bg-background last:border-primary-medium ..." /><FaVialsclassName="first:bg-background last:border-primary-medium ..." /><FaVialsclassName="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><FaVialsclassName="even:bg-background odd:border-primary-medium ..." /><FaVialsclassName="even:bg-background odd:border-primary-medium ..." /><FaVialsclassName="even:bg-background odd:border-primary-medium ..." /><FaVialsclassName="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"><FaVialsclassName="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.
<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>