xcls

merge html classnames with conditions

Usage no npm install needed!

<script type="module">
  import xcls from 'https://cdn.skypack.dev/xcls';
</script>

README

xcls

merge html classnames with conditions

Install

npm i xcls

or

yarn add xcls

Usage

import cls from 'xcls';

// signature -> cls(...args: (string | [boolean, string, string?] | null | undefined)[]): string;

// basic example
cls('px-4 py-1', 'bg-purple'); // 'px-4 py-1 bg-purple'

// with conditions
let isButtonActive = true;
cls('px-4 py-1', [isButtonActive, 'bg-blue', 'bg-purple']); // 'px-4 py-1 bg-blue'

// state changes
isButtonActive = false;
cls('px-4 py-1', [isButtonActive, 'bg-blue', 'bg-purple']); // 'px-4 py-1 bg-purple'