PHPackages                             vewe/classvariance - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. vewe/classvariance

ActiveLibrary[Utility & Helpers](/categories/utility)

vewe/classvariance
==================

Vewe ClassVariance, an all-PHP combined implementation of Class Variance Authority, twMerge, and Tailwind-Variants

0.2.0(3mo ago)228[1 issues](https://github.com/iamdadmin/vewe-classvariance/issues)MITPHPPHP 8.4.\* || 8.5.\*

Since Feb 8Pushed 3mo agoCompare

[ Source](https://github.com/iamdadmin/vewe-classvariance)[ Packagist](https://packagist.org/packages/vewe/classvariance)[ Docs](https://github.com/iamdadmin/vewe-classvariance)[ RSS](/packages/vewe-classvariance/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (3)Versions (4)Used By (0)

Vewe ClassVariance
==================

[](#vewe-classvariance)

About
-----

[](#about)

Aiming to be an all-PHP combined implementation of Class Variance Authority, twMerge, and Tailwind-Variants.

Supporting the current version of PHP, less one, as a minimum requirement, to keep the package freshly maintained and utilising the latest features of PHP.

Version Strategy
----------------

[](#version-strategy)

Based on semantic versioning, with the following constraints

- 1.x.x releases support PHP8.4, PHP8.5
- 2.x.x releases support PHP8.5, PHP8.6
- 3.x.x releases support PHP8.6, PHP-Next (tbc)

Major point releases may introduce breaking changes, which will be in the release notes.

Minor point releases should be non-breaking changes and fixes.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require vewe/classvariance
```

Usage
-----

[](#usage)

### `Cv`, with slots, akin to Tailwind-Variants

[](#cv-with-slots-akin-to-tailwind-variants)

You can declare your classes as a single string, space delimited, or you can provided it as an array of strings, or a mix of the two methods, as suits your needs.

When using slots, *always declare a 'base' slot consistently* in the `Cv::new` definition. Unlike Tailwind-Variants, `Cv` *does not* assume which classes are meant for which slot, you must be declarative.

This is a conscious design decision, as your definition should have an immutable source of truth, instead of relying on script defaults which could change over time.

```
use Vewe\ClassVariance\Cv;

 $button = Cv::new(
    [
        'base' => ['font-semibold', 'border', 'rounded'],
        'label' => [''],
    ],
    [
        'variants' => [
            'color' => [
                'primary' => [
                    'base' => [
                        'bg-blue-500',
                        'border-transparent',
                        'hover:bg-blue-600'
                    ],
                    'label' => ['text-white'],
                ],
                'secondary' => [
                    'base' => [
                        'bg-white',
                        'border-gray-400',
                        'hover:bg-gray-100'
                    ],
                    'label' => ['text-black'],
                ],
            ],
            'size' => [
                'small' => [
                    'base' => ['py-1', 'px-2'],
                    'label' => ['text-sm'],
                ],
                'medium' => [
                    'base' => ['py-2', 'px-4'],
                    'label' => ['text-base'],
                ],
            ],
        ],
        'compoundVariants' => [
            [
                'color' => 'primary',
                'size' => 'medium',
                'class' => [
                    'label' => 'uppercase',
                ],
            ],
        ],
        'defaultVariants' => [
            'color' => 'primary',
            'size' => 'medium',
        ],
    ],
);
```

When you don't specify a slot, it defaults to returning the 'base' slot

```