babel-plugin-tailwind-components

babel-plugin-tailwind-components

Use Tailwind with any CSS-in-JS library

Prerequisites

Before you start using babel-plugin-tailwind-components you will need to ensure that you have a Tailwind config file. You can grab the default config from the Tailwind repo.

Place the config file in your project root as tailwind.js. Alternatively you can specify a different filename in the plugin options.

Installation

There are two ways to use babel-plugin-tailwind-components. The recommended way is via babel-plugin-macros:

npm install --save-dev babel-plugin-macros tailwind.macro

Note: tailwind.macro is merely an alias for babel-plugin-tailwind-components/macro

Then add babel-plugin-macros to your babel config:

{
  "plugins": ["macros"]
}

You can now use Tailwind classes with your preferred CSS-in-JS library by importing tailwind.macro:

import styled from 'styled-components'
import tw from 'tailwind.macro'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

Alternatively, you can use the plugin without babel-plugin-macros:

npm install --save-dev babel-plugin-tailwind-components

// .babelrc
{
  "plugins": ["tailwind-components"]
}

When using this method the tw tag is available anywhere without an explicit import:

import styled from 'styled-components'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

How it works

The babel plugin transforms the tagged template literal into either a style object or template literal, depending on context. If you use the tag inside a template literal, the output will be a template literal, like in the styled-components example above.

In

const foo = tw`bg-cover`
const bar = `${tw`bg-cover`}`

Out

const foo = {
  backgroundSize: 'cover'
}
const bar = ${`background-size:cover;`}

You can enforce a particular format globally by setting the format option...

Options

config: path to your Tailwind config file. Defaults to ./tailwind.js

format: the format of the resulting styles (object or string). By default it will be an object except when inside a template literal.

// babel-plugin-macros.config.js
module.exports = {
  tailwind: {
    config: './tailwind.config.js',
    format: 'object'
  }
}

// or .babelrc
{
  "plugins": [
    [
      "tailwind-components", {
        "config": "./tailwind.config.js",
        "format": "object"
      }
    ]
  ]
}

Examples

styled-components

import styled from 'styled-components'
import tw from 'tailwind.macro'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

emotion

import styled from 'preact-emotion'
import { css } from 'emotion'
import tw from 'tailwind.macro'

const green = css(tw`text-green`)

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

const App = () => (
  <Button class={green} css={tw`uppercase`}>
    hello, world
  </Button>
)

Note: the css prop requires the use of babel-plugin-emotion

glamor

import { css } from 'glamor'
import tw from 'tailwind.macro'

const style = css(tw`font-mono text-sm text-red hover:text-blue`)

const App = () => <div {...style}>hello, world</div>