babel-plugin-tailwind-css-in-js v0.1.1

babel-plugin-tailwind-to-css-in-js

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, CXS, etc...

Before:

import { css } from "glamor";

const classes = css(tw("w-5/6 sm:text-purple md:text-red md:border-purple"));

class App extends React.Component {
  render() {
    return <div className={classes}>what now</div>;
  }
}

After:

import { css } from "glamor";

const classes = css({
  width: "83.33333%",
  "@media (min-width: 576px)": {
    color: "#9561e2"
  },
  "@media (min-width: 768px)": {
    color: "#e3342f",
    borderColor: "#9561e2"
  }
});

class App extends React.Component {
  render() {
    return <div className={classes}>what now</div>;
  }
}

Installation

Assuming you already have babel setup in your project.

yarn add babel-plugin-tailwind-to-css-in-js

.babelrc

{
  ...,
  "plugins": ["babel-plugin-tailwind-to-css-in-js"]
}

Custom TailwindCSS Config

This is possible! look in the example folder.

cd example
yarn
yarn start

I hope to write better instructions "soon"!