tailwind-to-object v0.0.24
Fast and simple zero-dependency library of a single-argument function that converts Tailwind classes of default configuration to style objects using pre-compiled key-value pairs of class names and corresponding styles. Perfect for email rendering! Can be used on front-end, back-end and your microwave if it supports JavaScript. Check list of supported classes (can take a while to load).
npm i tailwind-to-object
# Or
yarn add tailwind-to-object
API
tailwindToObject
Accepts a space-delimited string of Tailwind classes as the only argument and returns an object of camel-cased styles.
import tailwindToObject from 'tailwind-to-object';
const style = tailwindToObject(`
text-2xl
font-bold
text-center
!px-3
text-red-200
bg-[#FFFFFF]
border-[5px]
-top-4
w-[calc(100%_-_100px)]
h-1/2
`);
console.log(style);
/*
{
// text-2xl
fontSize: '1.5rem',
lineHeight: '2rem',
// font-bold
fontWeight: '700',
// text-center
textAlign: 'center',
// !px-3
paddingLeft: '0.75rem !important',
paddingRight: '0.75rem !important',
// text-red-200
color: '#FECACA',
// bg-[#FFFFFF]
background: '#FFFFFF',
// border-[5px]
borderWidth: '5px',
// -top-4
top: '-1rem',
// w-[calc(100%_-_100px)]
width: 'calc(100% - 100px)',
// h-1/2
height: '50%',
}
*/
Example usage with React
You can simulate the regular className property in your React component that is going to be converted and applied as a style object. Optionally, install tailwind-merge to avoid potential conflicts. Since the library is not related to any framework, you can create something with similar idea for your own environment. Feel free to create a PR to add more examples.
// tailwindComponents.ts
import { ComponentProps, createElement } from 'react';
import { twMerge } from 'tailwind-merge';
import tailwindToObject from 'tailwind-to-object';
// put your custom classes here
const classesToReplace = {
'my-custom-class': 'text-[#FF0000] bg-white',
// since the function doesn't use Tailwind config, you may want to define custom font sizes here
'text-sm': 'text-[14px]',
};
const replaceClasses = (classNames: string[]) => {
const classesToBeApplied = [];
for (const cls of classNames) {
if (classesToReplace[cls as keyof typeof classesToReplace]) {
classesToBeApplied.push(classesToReplace[cls as keyof typeof classesToReplace]);
} else {
classesToBeApplied.push(cls);
}
}
return classesToBeApplied;
};
function createTag<T extends keyof JSX.IntrinsicElements>(tag: T) {
const component = ({ className, style, ...rest }: ComponentProps<T>) => {
const classNames = replaceClasses(className?.trim().split(/\s+/) ?? []);
const tailwindStyle = classNames.length ? tailwindToObject(twMerge(...classNames)) : {};
return createElement(tag, {
style: { ...tailwindStyle, ...(style ?? {}) },
...rest,
});
};
component.displayName = tag;
return component;
}
export const Div = createTag('div');
export const Span = createTag('span');
export const Table = createTag('table');
export const Tbody = createTag('tbody');
export const Thead = createTag('thead');
export const Tr = createTag('tr');
export const Td = createTag('td');
export const Th = createTag('th');
export const Ul = createTag('ul');
export const Ol = createTag('ol');
export const Li = createTag('li');
export const P = createTag('p');
export const A = createTag('a');
export const Button = createTag('button');
export const Img = createTag('img');
export const H1 = createTag('h1');
export const H2 = createTag('h2');
export const H3 = createTag('h3');
export const H4 = createTag('h4');
export const H5 = createTag('h5');
export const H6 = createTag('h6');
export default createTag;
Now you can use the new components like that:
import { Div } from './tailwindComponents';
// ...
<Div className="mt-6 leading-6 font-semibold my-custom-class" style={{ ...someOtherStyles }}>
Hello World
</Div>
Note that, by default, if Tailwind class is not supported, tailwindToObject
is going to throw an error.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
2 years ago
2 years ago