Arbitrary values, screen import and important prefix

New: Arbitrary values (#447)

Twin now supports the same arbitrary values syntax popularized by Tailwind’s jit ("Just-in-Time") mode.

tw`top-[calc(100vh - 2rem)]`

// ↓ ↓ ↓ ↓ ↓ ↓

;({ top: 'calc(100vh - 2rem)' })

This is a great way to add once-off values that don’t need to be in your tailwind config.

Read more about arbitrary values →

New: Important prefix (#449)

Also from Tailwind JIT, is the bang ! prefix to add important styles:

tw`!block`;

// ↓ ↓ ↓ ↓ ↓ ↓

;({ "display": "block !important" })

Twin will continue to support a bang at the end of the class too - so you've got a couple of options.

See the pr for more info →

New: Screen import (#408)

The screen import creates media queries for custom css that sync with your tailwind config screen values (sm, md, lg, etc).

Usage with the css prop

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

const styles = [
  screen`sm`({ display: 'block', ...tw`inline` }),
]

<div css={styles} />

Usage with styled components

import tw, { styled, screen, css } from 'twin.macro'

const Component = styled.div(() => [
  screen`sm`({ display: 'block', ...tw`inline` }),
])

<Component />

Read more about the screen import →

Bugfixes

• Fix values issues on [divide/space]-[x-/y-]reverse (#359)