@ui-devtools/tailwind-utils

Utilities to parse and create tailwind classnames

 

Installation

yarn add @ui-devtools/tailwind-utils

or

npm install @ui-devtools/tailwind-utils

 

Usage

Open demo in codesandbox

Setup:

import Utils from '@ui-devtools/tailwind-utils';
import config from './tailwind.config.js'; // your tailwind config file, optional

const { parse, classname } = Utils(config);

classname → definition:

const definition = parse('w-48');
// { prefix: 'w', property: 'width', value: '12rem' }

const definition = parse('md:hover:bg-red-200/50');
// { responsiveModifier: 'md', pseudoModifier: 'hover', property: 'backgroundColor' value: '#fecaca80' }

definition → classname:

const { className } = classname({ property: 'margin', value: '-16rem' });
// -m-64

const { className } = classname({
  responsiveModifier: 'md',
  pseudoModifier: 'hover',
  property: 'backgroundColor',
  value: '#fecaca80'
});
// md:hover:bg-red-200/50

const { className, error } = classname({
  responsiveModifier: 'small',
  property: 'textColor',
  value: '#fecaca80'
});
/*
{
  error: {
    responsiveModifier: 'Unidentified responsive modifier, expected one of [sm, md, lg, xl, 2xl], got small'
  }
}
*/

 

like it?

⭐ this repo

 

license

MIT © siddharthkp