Fast and simple one-file zero-dependency library of one function that converts Tailwind classes with default configuration to CSS style objects. Perfect for email libraries based on React. Can be used on front-end, back-end and your microwave if it runs JavaScript.
npm i tailwind-to-object
# Or
yarn add tailwind-to-object
API
tailwindToObject
Accepts string of tailwind classes as first argument and returns an object of styles.
import tailwindToObject from 'tailwind-to-object';
const style = tailwindToObject('text-2xl font-bold text-center !px-3 text-red-200 bg-[#FFFFFF]');
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',
}
*/
Example usage
You can simulate normal classNames in your React components without actually using them.
Let's create Div
component that behaves like a normal div with className
attribute that uses style
attribute for styling.
import React, { CSSProperties, ReactNode } from 'react';
import tailwindToObject from 'tailwind-to-object';
interface Props {
className?: string;
style?: CSSProperties;
children?: ReactNode;
}
const Div = ({ className, style, children }: Props) => (
<div style={{
...(className ? tailwindToObject(className) : {}),
...(style ?? {}),
}}>
{children}
</div>
);
export default Div;
Now you can use this component like that:
<Div className="mt-6 leading-6 bg-red-400 font-semibold" style={{ ...someOtherStyles }}>
Hello World
</Div>
You can build a collection of such components for your taste. Here is a random copy-paste:
<Table className="w-full border-collapse mt-8 border-t border-l-0 border-r-0 border-b-0 border-solid">
<tbody>
{products.map((product) => (
<tr key={product.id}>
<Td className="py-4 border-b border-t-0 border-l-0 border-r-0 border-solid">
<Div className="whitespace-nowrap">
<Div className='pt-7 mt-px inline-block mr-4 align-top'>
{order.quantityMap[product.id]}
</Div>
<Div className='pt-4 inline-block mr-4 align-top'>
<Div className='inline-block relative'>
<Img src={product.images[0].url} width={64} alt="Product image" />
</Div>
</Div>
<Div className="inline-block align-top">
<Div className="mb-2">
{product.collection.title ?? <em>Unknown type</em>}
</Div>
<Div className="mb-2">{product.title}</Div>
<Div>
{product.description?.split(/\n/).map((desc, i) => (
<Div key={i}>{desc}</Div>
))}
</Div>
</Div>
</Div>
</Td>
</tr>
))}
</tbody>
</Table>
Enjoy!