Tailwind-jsx NPM

🌬 Tailwind JSX

Custom JSX Pragma to work easily with TailwindCSS in React

Problem

Although TailwindCSS is awesome, working with it on React can be better. There is not an easy way to compose classNames or conditionally add Tailwind classNames.

Solution

This custom JSX Pragma makes all the available TailwindCSS classNames as boolean props, so you can conditionally include them, combine them and compose them.

Features

🚀 TypeScript intelliSense and type checking
⚡️ Composability

Install

yarn add tailwind-jsx

Usage

/** @jsx jsx */
import { jsx } from "tailwind-jsx";

const App = () => {
  return (
    <div bgWhite roundedLg p6>
      <img
        w16
        h16
        roundedFull
        mxAuto
        alt="Erin Linford"
        src="https://randomuser.me/api/portraits/women/17.jpg"
      />
      <div textCenter>
        <h2 textLg>Erin Linford</h2>
        <div textPurple500>Customer Support</div>
        <div textGray600>erinlindford@example.com</div>
        <div textGray600>(555) 765-4321</div>
      </div>
    </div>
  );
};

export default App;

Caveats

Since it is not possible to add some characters like dashes and dashes to a React prop name, all props had been camelCased and some of the special characters (:: and /) had been replaced. Below is a table with some examples

Type	TailwindCSS className	Final Prop
Pseudo elements	`placeholder-transparent::placeholder`	`placeholderTransparentPseudoPlaceholder`
Slashed values	`sm:w-1/2`	`smW1Slash2`
Negative values	`sm:-m-1`	`smNegM1`