Utilities to parse and create tailwindcss classnames
Extracted from the source code for UI Devtools and optimised for open source.
Installation
yarn add @ui-devtools/tailwind-utils
or
npm install @ui-devtools/tailwind-utils
Usage
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');
// { 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?
license
MIT © siddharthkp
