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 
 */

License

MIT