tailwind-to-object

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!