Skip to content

Commit

Permalink
[Twig] Minor docs tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
weaverryan committed Mar 1, 2024
1 parent 6b3a8ea commit 08a94f1
Showing 1 changed file with 6 additions and 8 deletions.
14 changes: 6 additions & 8 deletions src/TwigComponent/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -1063,16 +1063,14 @@ Component with Complex Variants (CVA)

.. versionadded:: 2.16

The ``CVA`` function was added in TwigComponents 2.16.
The ``cva`` function was added in TwigComponents 2.16.

[CVA (Class Variant Authority)](https://cva.style/docs/getting-started/variants) is a concept from the JavaScript
world and used by the well-known [shadcn/ui](https://ui.shadcn.com).
CVA allows you to display a component with different variants (color, size, etc.),
to create highly reusable and customizable components.
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:
The cva function take as argument an array key-value pairs.
The base key allow you define a set of classes commune to all variants.
In the variants key you define the different variants of your component.
to create highly reusable and customizable components. 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:

.. code-block:: html+twig

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

Then use the color and size variants to select the classes needed:
Then use the ``color`` and ``size`` variants to select the classes needed:

.. code-block:: html+twig

Expand All @@ -1123,7 +1121,7 @@ CVA and Tailwind CSS
~~~~~~~~~~~~~~~~~~~~

CVA work perfectly with Tailwind CSS. The only drawback is that you can have class conflicts.
To "merge" conflicting classes together and keep only the one you need, use the
To "merge" conflicting classes together and keep only the ones you need, use the
``tailwind_merge()` method from [tales-from-a-dev/twig-tailwind-extra](https://github.com/tales-from-a-dev/twig-tailwind-extra)
with the ``cva()`` function:

Expand Down

0 comments on commit 08a94f1

Please sign in to comment.