Coding Style

Splitting

clsx is another popular utility for combining class names in JavaScript. It’s lightweight, fast, and works well with Tailwind CSS.

Here’s a simple example of how to use clsx:

import  clsx from 'clsx' ; 
const  baseClasses = 'bg-blue-500 text-white' ;
const  additionalClasses = 'rounded-lg p-4'  ;
const  combinedClasses = clsx(baseClasses, additionalClasses);

In this example, combinedClasses will contain the string ‘bg-blue-500 text-white rounded-lg p-4’.

Arbitrary properties

Arbitrary properties in Tailwind CSS provide a powerful and flexible way to add custom CSS properties and values directly within your Tailwind utility classes.

Here’s a simple example

<ul className='[&>li:nth-child(2)]:text-red-800 
[&>li:nth-child(3)]:text-green-600'> 

 <li>First Item</li>
 <li> Second Item Item </li>
 <li>Third Item </li>

</ul>