Styled API

[bradlc]

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]

Should be able to support something like this:

In

import tw from 'tailwind.macro'

let Header = tw.button`
  uppercase
  ${props => props.size === 'large' ? tw`text-lg` : tw`text-sm`}
`

Out

import _styled from '@emotion/styled'

let Header = _styled('button')(
  { textTransform: 'uppercase' },
  props => props.size === 'large'
    ? { fontSize: '1.125rem' }
    : { fontSize: '.875rem' }
)

[tobeycodes]

It would be useful to use it to extend so instead of

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

We could do

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

[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`

[tobeycodes]

@bradlc Do you know why when I get this error? It looks like you've wrapped styled() around your React component (h3), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

Has error

const Test = tw.h3`block w-40 mx-auto pt-4 pb-6 cursor-pointer`;`

No error

const Test = styled.h3`
  ${tw`block w-40 mx-auto pt-4 pb-6 cursor-pointer`}
`;

No error

const Test = tw.div`block w-40 mx-auto pt-4 pb-6 cursor-pointer`;

It seems to me it only happens when it's tw other than a div.

[bradlc]

@schrapel are you still seeing this on v1.0.0-alpha.5?

[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;`}
`

[tobeycodes]

@bradlc I do not see this anymore. Sorry I somehow missed this notification. Thanks for the great package.