{"repo":"avo-hq/class_variants","free":true,"listed":false,"github":"https://github.com/avo-hq/class_variants","clone":"git clone https://github.com/avo-hq/class_variants.git","description":"Easily configure styles and apply them as classes.","language":"Ruby","stars":157,"topics":["rails","ruby","tailwindcss"],"license":"MIT","category":"ui-components","readme_excerpt":"Class variants We ❤️ Tailwind CSS but sometimes it's difficult to manage the state of some elements using conditionals. class variants is a tiny helper that should enable you to create, configure, and apply different variants of elements as classes. Inspired by variant-classnames ✌️ Quicklinks DRY up your tailwind CSS using this awesome gem Installation Add this line to your application's Gemfile: And then execute: Or install it yourself as: Usage We create an object from the class or helper where we define the configuration using four arguments: 1. The base keyword argument with default classes that should be applied to each variant. 2. The variants keyword argument where we declare the variants with their option and classes. 3. The compound variants keyword argument where we declare the compound variants with their conditions and classes 4. The defaults keyword argument (optional) where we declare the default value for each variant. Below we'll implement the button component from Tailwind UI. Compound Variants Override classes with render We can also override the builder classes in the render method. Now, the block class will be appended to the classes bus. If you're using the tailwind merge plugin it will override the inline-flex class. Block configurations You might have scenarios where you have more advanced conditionals and you'd like to configure the classes using the block notation. Slots You might have components which have multiple slots or places where you'd like t","default_branch":null,"files":null,"tree":[],"storefront":"/r/avo-hq","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/avo-hq/class_variants/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."}