React Tailwind Converter

React Tailwind Converter is an npm package I built that lets you write React components using intuitive shorthand props instead of long Tailwind class strings. It converts props like mt="16" and bgc="warning-500" into their Tailwind CSS equivalents at build time, with full responsive breakpoint support.

STACK

  • React
  • TypeScript
  • Tailwind CSS
  • npm

CODE

Repositorynpm Package
App.tsx
import { Box } from "react-tailwind-converter";

function App() {
  return (
    <Box
      mt="16"
      padding="20"
      ml={{ xs: "80", lg: "32" }}
      borderRadius="3xl"
      bgc="warning-500"
      borderColor="danger-400"
      textColor="black"
    >
      Testing Box
    </Box>
  );
}

Project Purpose and Goal

Writing long Tailwind class strings in React components can become hard to read and maintain. I wanted to create a cleaner developer experience where styling props are explicit, readable and colocated with the component. The package converts shorthand props into Tailwind classes, supports responsive breakpoints via object syntax, and works as a drop-in replacement for standard HTML elements.

Webstack and explanation

The package is written in TypeScript and published on npm. It provides a set of React components (Box, Flex, Grid, Text) that accept styling props and convert them into Tailwind utility classes. It supports responsive breakpoints through object prop syntax, allowing developers to write ml={{ xs: "80", lg: "32" }} instead of className="ml-80 lg:ml-32".

Lessons Learned

Building and publishing an npm package taught me a lot about the open-source ecosystem, package versioning, and writing good documentation. I gained experience with TypeScript generics for building flexible component APIs and learnt how to structure a library for tree-shaking and minimal bundle size.

Other Projects

TrustRails

An AI-commerce platform with an MCP server, SDK and REST API for AI shopping agents.

Worktools Website

A website in React with Gatsby and custom CSS animations.

Artbook

A MERN social network allowing you to share art with your friends.

Websockets Pictionary

A pictionary game using P5.js and websockets with a MongoDB database.