You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/TwigComponent/doc/index.rst
+6-8Lines changed: 6 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -1063,16 +1063,14 @@ Component with Complex Variants (CVA)
1063
1063
1064
1064
.. versionadded:: 2.16
1065
1065
1066
-
The ``CVA`` function was added in TwigComponents 2.16.
1066
+
The ``cva`` function was added in TwigComponents 2.16.
1067
1067
1068
1068
[CVA (Class Variant Authority)](https://cva.style/docs/getting-started/variants) is a concept from the JavaScript
1069
1069
world and used by the well-known [shadcn/ui](https://ui.shadcn.com).
1070
1070
CVA allows you to display a component with different variants (color, size, etc.),
1071
-
to create highly reusable and customizable components.
1072
-
This is powered by a ``cva()`` Twig function where you define ``base`` classes that should always be present and then different ``variants`` and the corresponding classes:
1073
-
The cva function take as argument an array key-value pairs.
1074
-
The base key allow you define a set of classes commune to all variants.
1075
-
In the variants key you define the different variants of your component.
1071
+
to create highly reusable and customizable components. This is powered by a ``cva()`` Twig
1072
+
function where you define ``base`` classes that should always be present and then different
1073
+
``variants`` and the corresponding classes:
1076
1074
1077
1075
.. code-block:: html+twig
1078
1076
@@ -1099,7 +1097,7 @@ In the variants key you define the different variants of your component.
1099
1097
{% block content %}{% endblock %}
1100
1098
</div>
1101
1099
1102
-
Then use the color and size variants to select the classes needed:
1100
+
Then use the ``color`` and ``size`` variants to select the classes needed:
1103
1101
1104
1102
.. code-block:: html+twig
1105
1103
@@ -1123,7 +1121,7 @@ CVA and Tailwind CSS
1123
1121
~~~~~~~~~~~~~~~~~~~~
1124
1122
1125
1123
CVA work perfectly with Tailwind CSS. The only drawback is that you can have class conflicts.
1126
-
To "merge" conflicting classes together and keep only the one you need, use the
1124
+
To "merge" conflicting classes together and keep only the ones you need, use the
1127
1125
``tailwind_merge()` method from [tales-from-a-dev/twig-tailwind-extra](https://github.com/tales-from-a-dev/twig-tailwind-extra)
0 commit comments