// In
import tw from '@ecreeth/tw.macro'
const buttonStyles = tw`bg-transparent text-sm text-blue-500`

// Out
const buttonStyles = {
  backgroundColor: 'transparent',
  fontSize: 14,
  color: '#4299e1'
}

Install

1. Install the dependencies

npm install -D @ecreeth/tw.macro babel-plugin-macros
# or
yarn add @ecreeth/tw.macro babel-plugin-macros -D

2. Enable Babel macros in .babelrc

Enable Babel macros by adding "macros" to the plugin configuration:

{
  "plugins": ["macros"]
}

Personal styles

You can customize the default styles and even add your own. There are two ways to do:

With package.json

  "babelMacros": {
    "tailwind": {
      "file": "./my_personal_styles.json"
    }
  },

File Content

{
  "bg-black": {
    "backgroundColor": "black"
  },
  "bg-personal": {
    "backgroundColor": "coral"
  }
}

With config file

This configuration file can be any of the following:

• .babel-plugin-macrosrc
• .babel-plugin-macrosrc.json
• .babel-plugin-macrosrc.yaml
• .babel-plugin-macrosrc.yml
• .babel-plugin-macrosrc.js
• babel-plugin-macros.config.js

Examples

Go to codesandbox for see this example

Code credits

This project stemmed from tailwind-rn and twin.macro