/tailwind-utils

Utilities to parse and create tailwindcss classes

Primary LanguageCSSMIT LicenseMIT



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