ui:cn
View as MarkdownCombines fixed class names with class names that apply on a condition.
<article class="{ui:cn(value: 'rounded border p-4', when: {'opacity-50': isSoldOut, 'border-red-500 bg-red-50': hasError})}">
Each key in when holds one or more class names and applies when its value is truthy. Empty entries and duplicates are dropped, so a long class list can span several lines, which suits Tailwind CSS.
In a component, add the classes a caller passes to your own:
<div class="{ui:cn(value: 'rounded border p-4 {class}')}">
Arguments
Permalink to heading "Arguments"| Name | Type | Description | Required | Default |
|---|---|---|---|---|
value |
string | The class input string to process | No | - |
when |
array | Array of conditional classes where key is class(es) and value is condition | No | [] |
as |
string | Variable name to assign the result to | No | '' |