@@ -33,9 +33,9 @@ $ gem install class_variants
33
33
34
34
We create an object from the class or helper where we define the configuration using four arguments:
35
35
36
- 1 . The default classes that should be applied to each variant
37
- 1 . The ` variants ` keyword argument where we declare the variants with their option and classes
38
- 1 . The ` compoundVariants ` keyword argument where we declare the compound variants with their conditions and classes
36
+ 1 . The ` base ` keyword argument with default classes that should be applied to each variant.
37
+ 1 . The ` variants ` keyword argument where we declare the variants with their option and classes.
38
+ 1 . The ` compoundVariants ` keyword argument where we declare the compound variants with their conditions and classes.
39
39
1 . The ` defaults ` keyword argument (optional) where we declare the default value for each variant.
40
40
41
41
## Example
@@ -45,7 +45,7 @@ Below we implement the [button component](https://tailwindui.com/components/appl
45
45
``` ruby
46
46
# Define the variants and defaults
47
47
button_classes = ClassVariants .build(
48
- " inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" ,
48
+ base: " inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" ,
49
49
variants: {
50
50
size: {
51
51
sm: " px-2.5 py-1.5 text-xs" ,
@@ -82,7 +82,7 @@ button_classes.render(color: :red, size: :xl, icon: true)
82
82
83
83
``` ruby
84
84
button_classes = ClassVariants .build(
85
- " inline-flex items-center rounded" ,
85
+ base: " inline-flex items-center rounded" ,
86
86
variants: {
87
87
color: {
88
88
red: " bg-red-600" ,
@@ -105,7 +105,8 @@ button_classes.render(color: :red, border: true) # => "inline-flex items-center
105
105
``` ruby
106
106
# Somewhere in your helpers
107
107
def button_classes (classes , ** args)
108
- class_variants(" inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" ,
108
+ class_variants(
109
+ base: " inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" ,
109
110
variants: {
110
111
size: {
111
112
sm: " px-2.5 py-1.5 text-xs" ,
0 commit comments