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

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');
// { 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