🌬 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.

Table of Contents

• Features
• Install
• Usage
• Caveats
• Contributors
• Contributing
• License

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>[email protected]</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 |

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Contributing

If you have any question, suggestion or recommendation, please open an issue about it.

If you decided you want to introduce something to the project, please read contribution guidelines first.

License

MIT