tailwindcss-parser

package to parse and create tailwindcss classes with javascript

you can get information like css property and value, variants and more from tailwind classes in js

 

Installation

npm install @tailwindcss-parser

 

Setup:

import tailwindParser from 'tailwindcss-parser';
import config from './tailwind.config.js'; // your tailwind config file, optional

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

usage

parse className:

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

const definition = parse("[direction:rtl]");
// {property: "direction", value: "rtl"}

const definition = parse("p-[100px]");
/* 
{
  property: "padding", 
  value: "100px", 
  relatedProperties: ["padding-top","padding-right","padding-bottom","padding-left"]
}

*/

create 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'
  }
}
*/

 

Github

GITHUB Repository

license

MIT © Izaanaami

Thanks to siddharthkp who built the main part of this package