{"repo":"ecklf/tailwindcss-radix","free":true,"listed":false,"github":"https://github.com/ecklf/tailwindcss-radix","clone":"git clone https://github.com/ecklf/tailwindcss-radix.git","description":"Utilities and variants for styling Radix state","language":"TypeScript","stars":2165,"topics":["tailwindcss","plugin","radix","react"],"license":"MIT","category":"ui-components","readme_excerpt":"Utilities and variants for styling Radix state What is this? The main purpose of this library is adding classnames for accessing Radix data attributes, which gains you the benefit of auto-completion compared to using data- variants. TL;DR It's @headlessui-tailwindcss for Radix. Installation Demo Click on the banner to check out the demo components. You can find the code inside the demo folder. Usage With @plugin directive (recommended) Default prefix Custom prefix With @config directive Default prefix Custom prefix Load configuration Styling state Basic usage This plugin works with CSS attribute selectors. Use the variants based on the data- attribute added by Radix. Accessing parent state When you need to style an element based on the state of a parent element, mark the parent with the group class and style the target with group-radix- modifiers. Example usage of a conditional transform for a Radix Accordion : Accessing sibling state When you need to style an element based on the state of a sibling element, mark the sibling with the peer class and style the target with peer-radix- modifiers. Example usage of a conditional icon color for a sibling of a Radix Checkbox : Disabled state Use the generated disabled variant. CSS Variable Utilities Origin position Content / Viewport Width / Height Content Available Width / Height Trigger Available Width / Height Toast swiping Migrate from v1 To prevent a possible future name clashing the skipAttributeNames option has been removed. I","default_branch":null,"files":null,"tree":[],"storefront":"/r/ecklf","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ecklf/tailwindcss-radix/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}