babel-plugin-tailwind
Transforms TailwindCSS classes to CSS-in-JS at build time.
Note - Works with CSS-in-JS libraries that accept a style object such as Glamor, Glamorous, Emotion, CXS, etc...
Before:
import css from "glamor"; // as a string of classeslet classes = ; // or as an array// let classes = css(tw(["w-5/6", "sm:text-purple", "md:text-red", "md:border-purple")); Component { return <div =>what now</div>; }
After:
import css from "glamor"; const classes = ; Component { return <div =>what now</div>; }
Installation
This is assuming you already have babel setup in your project. The example below uses babel-preset-env
.
yarn add babel-plugin-tailwind
.babelrc
"presets": 'env' "plugins": "babel-plugin-tailwind"
Custom TailwindCSS Config
This is possible! look in the example
folder.
cd example
yarn
yarn start
I hope to write better instructions "soon"!