(Click on the image to see full video)
Custom JSX Pragma to work easily with TailwindCSS in React
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.
This custom JSX Pragma makes all the available TailwindCSS classNames as boolean props, so you can conditionally include them, combine them and compose them.
- 🚀 TypeScript intelliSense and type checking
- ⚡️ Composability
yarn add tailwind-jsx/** @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;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 |
Thanks goes to these wonderful people (emoji key):
 Kevin Wolf 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
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.