A helper tool for Tailwind CSS

[okose-me]

I have created the following package for TailwindCSS, I would appreciate it if you use it and give me positive and negative feedback 🥳.

For NPM
https://www.npmjs.com/package/tcls

tcls

A helper created for Tailwind CSS, which makes it easy to write className and also provides conditional usage.
As you can see in the examples, it is possible to group breakpoints as objects. If necessary, you can create an array and add conditions to the objects in it.

import {tCls} from 'tcls'

Use with conditions

For example, if the conditions are active, an output like this occurs;

export default function App() {
    const isHidden = true, isYellow = true;

    return (
        <div className={tCls('grid',
            ['grid-cols-1', isYellow && 'text-yellow-500'],
            {
                'md': 'py-16',
                'sm': [
                    'grid-cols-2 px-8 py-12 gap-x-8', 
                    isYellow && 'text-yellow-500'
                ],
                'hidden': isHidden
            })}>
            Hello, World!
        </div>
    )
}
  
/*  
Output:  
grid grid-cols-1 text-yellow-500 md:py-16 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 sm:text-yellow-500 hidden  
 */

For example, if the conditions are passive, an output like this occurs;

export default function App() {
    const isHidden = false, isYellow = false;

    return (
        <div className={tCls('grid',
            ['grid-cols-1', isYellow && 'text-yellow-500'],
            {
                'md': 'py-16',
                'sm': [
                    'grid-cols-2 px-8 py-12 gap-x-8', 
                    isYellow && 'text-yellow-500'
                ],
                'hidden': isHidden
            })}>
            Hello, World!
        </div>
    )
}  
  
/*  
Output:  
grid grid-cols-1 md:py-16 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8  
 */

Or another example is use with breakpoints;

export default function App() {
    const isHidden = false, isYellow = false;

    return (
        <div className={tCls(
            'grid grid-cols-1 text-yellow-500',
            {
                'md': 'py-16',
                'sm': 'grid-cols-2 px-8 py-12 gap-x-8'
            })}>
            Hello, World!
        </div>
    )
}
  
/*  
Output:  
grid grid-cols-1 text-yellow-500 md:py-16 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8  
 */

[gynekolog]

I didn't test it but I don't think purgecss will work. Look at the documentation: https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

You can get similar output with the classNames or clsx library:

export default function App() {
  const isHidden = false,
    isYellow = false;

  return (
    <div
      className={clsx(
        "grid grid-cols-1",
        [
          "md:py-16",
          "sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8"
        ],
        isHidden && "hidden",
        {
          "text-yellow-500": isYellow,
        }
      )}
    >
      Hello, World!
    </div>
  );
}

[okose-me]

@gynekolog It's basically the same as clsx but it has extra features like using breakpoint, in addition clsx is faster. The examples here are just to illustrate the variety.