Skip to content

Commit 08a94f1

Browse files
authored
[Twig] Minor docs tweaks
1 parent 6b3a8ea commit 08a94f1

File tree

1 file changed

+6
-8
lines changed

1 file changed

+6
-8
lines changed

src/TwigComponent/doc/index.rst

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1063,16 +1063,14 @@ Component with Complex Variants (CVA)
10631063

10641064
.. versionadded:: 2.16
10651065

1066-
The ``CVA`` function was added in TwigComponents 2.16.
1066+
The ``cva`` function was added in TwigComponents 2.16.
10671067

10681068
[CVA (Class Variant Authority)](https://cva.style/docs/getting-started/variants) is a concept from the JavaScript
10691069
world and used by the well-known [shadcn/ui](https://ui.shadcn.com).
10701070
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:
10761074

10771075
.. code-block:: html+twig
10781076

@@ -1099,7 +1097,7 @@ In the variants key you define the different variants of your component.
10991097
{% block content %}{% endblock %}
11001098
</div>
11011099

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:
11031101

11041102
.. code-block:: html+twig
11051103

@@ -1123,7 +1121,7 @@ CVA and Tailwind CSS
11231121
~~~~~~~~~~~~~~~~~~~~
11241122

11251123
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
11271125
``tailwind_merge()` method from [tales-from-a-dev/twig-tailwind-extra](https://github.com/tales-from-a-dev/twig-tailwind-extra)
11281126
with the ``cva()`` function:
11291127

0 commit comments

Comments
 (0)