Theme import

[ben-rogerson]

This new feature makes it easier to grab individual theme values from your tailwind.config.js

This change means you won't need to set up a theme provider to pass values down to your components.
You just need to import theme and define the object path to the value.

Some usage examples:

Syncing tailwind media queries with your css

import tw, { css, theme } from 'twin.macro'

const xlBp = content => css`
  @media (min-width: ${theme`screens.xl`}) {
    ${content}
  }
`

const Component = () => (
  <div css={xlBp(`
      ${tw`block`}
      color: red;
  `)} />
)

Adding color from your config

// Css prop

import { css, theme } from 'twin.macro'

const Input = () => <input css={css({ color: theme`colors.purple.500` })} />

// or

import { css, theme } from 'twin.macro'

const Input = () => (
  <input
    css={css`
      color: ${theme`colors.purple.500`};
    `}
  />
)

// Styled components

import { styled, theme } from 'twin.macro'

const Input = styled.div({ color: theme`colors.purple.500` })

// or

import { styled, theme } from 'twin.macro'

const Input = styled.div`
  color: ${theme`colors.purple.500`};
`

Setting a :root css variable

import { createGlobalStyle } from 'styled-components'
import { theme } from 'twin.macro'

const GlobalStyle = createGlobalStyle({
  ':root': {
    '--bg-color': theme`colors.black`
  }
})

Adding a gradient

// Css prop

import { theme } from 'twin.macro'

const Input = () => (
  <div
    css={{
      color: `linear-gradient(${theme`colors.pink.500`}, ${theme`colors.blue.500`})`,
    }}
  />
)

// Styled components

import { styled, theme } from 'twin.macro'

const Input = styled.div([
    { color: `linear-gradient(${theme`colors.pink.500`}, ${theme`colors.blue.500`})` }
])

[ben-rogerson]

The theme import can now bring back objects from your config too #169