Styled API

Add support for styled-components style API:

import tw from 'tailwind.macro'

let Header = tw.header`bg-red text-center`

Should we use the default export like above, or use a separate named export? For example:

import { styled } from 'tailwind.macro'

let Header = styled.header`bg-red text-center`

[bradlc]

It would be useful to use it to extend […]

You can do this already in pretty much the same way you would with standard emotion/styled-components:

import tw from 'tailwind.macro'

const Paragraph = tw.p`font-muli mb-8 text-gray-800 font-light`
const ParagraphLarge = tw(Paragraph)`text-lg text-gray-500`

[JaffParker]

Adding classes based on props doesn’t work when using tw.button syntax. I had to switch to styled-components to achieve that.

To illustrate, this won’t work:

import { ComponentType } from 'react'
import tw from 'tailwind.macro'

export const Button = tw.button`
  rounded
  py-2
  px-4
  m-1
  text-white
  uppercase

  focus:outline-none

  ${({ color }: ButtonProps) =>
    color === 'primary'
      ? `bg-red-500 hover:bg-red-700`
      : `bg-gray-500 hover:bg-gray-700`}
`

This will:

import { ComponentType } from 'react'
import styled from 'styled-components/macro'
import tw from 'tailwind.macro'

export const Button = styled.button`
  ${tw`
  rounded
  py-2
  px-4
  m-1
  text-white
  uppercase

  focus:outline-none
  `}

  ${({ color }: ButtonProps) =>
    color === 'primary'
      ? tw`bg-red-500 hover:bg-red-700`
      : `background-color: gray;`}
`