https://github.com/andrewdelprete/babel-plugin-tailwind

Transform TailwindCSS classes to CSS-in-JS at build time
https://github.com/andrewdelprete/babel-plugin-tailwind

Last synced: about 2 months ago
JSON representation

Transform TailwindCSS classes to CSS-in-JS at build time

• Host: GitHub
• URL: https://github.com/andrewdelprete/babel-plugin-tailwind
• Owner: andrewdelprete
• Created: 2017-11-24T15:25:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-24T15:35:15.000Z (almost 7 years ago)
• Last Synced: 2024-10-03T09:17:00.913Z (2 months ago)
• Language: JavaScript
• Homepage: https://dist-hahdnoakqf.now.sh
• Size: 106 KB
• Stars: 54
• Watchers: 6
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - babel-plugin-tailwind - Transform TailwindCSS classes to CSS-in-JS at build time (JavaScript)

README

        
# babel-plugin-tailwind

Transforms [TailwindCSS](https://www.tailwindcss.com) 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:

```jsx

import { css } from "glamor";

// as a string of classes

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

// or as an array

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

class App extends React.Component {

  render() {

    return 
what now
;

  }

}

```


After:

```jsx

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 
what now
;

  }

}

```


## 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

```javascript

{

  "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"!