Tailwind Binding

Tailwind Binding is a lightweight utility for easily binding Tailwind CSS classes in JavaScript. It provides a simple function that allows you to concatenate an array of Tailwind CSS classes into a single string for use in your React or JavaScript projects.

Installation

You can install Tailwind Binding using npm:

npm install tailwind-binding

##import BindCSS from 'tailwind-binding';

const mainSection = ['flex flex-col px-2', 'bg-red-400'];
const classNames = BindCSS(mainSection);

// In your JSX

<div className={classNames}>
  {/* Your content here */}
</div>

Example

import BindCSS from 'tailwind-binding';

const mainSection = ['flex flex-col px-2', 'bg-red-400'];
const secondarySection = ['text-white', 'font-bold'];

const mainSectionClass = BindCSS(mainSection);
const secondarySectionClass = BindCSS(secondarySection);

// In your JSX

<div className={mainSectionClass}>
  <p className={secondarySectionClass}>
    Welcome to Tailwind Binding!
  </p>
</div>

update

const isColumnLayout = true;

const mainSection = ['flex', { 'flex-col': isColumnLayout }, 'px-2', 'bg-red-400'];
const classNames = BindCSS(mainSection);