twin.macro

The magic of Tailwind with the flexibility of css-in-js.









🌟 New: Twin v3 now includes full Tailwind plugin support and more
Release notes →





alt="Open in StackBlitz"
src="https://developer.stackblitz.com/img/open_in_stackblitz_small.svg"
/>

---

Style jsx elements using Tailwind classes:

``js
import 'twin.macro'

const Input = () =>
`

Nest Twin’s tw import within a css prop to add conditional styles:

`js
import tw from 'twin.macro'

const Input = ({ hasHover }) => (
border, hasHover && twhover:border-black]} />
)
`

Or mix sass styles with the css import:

`js
import tw, { css } from 'twin.macro'

const hoverStyles = css
&:hover {
border-color: black;
${twtext-black}
}

const Input = ({ hasHover }) => (
border, hasHover && hoverStyles]} />
)
`

$3

You can also use the tw import to create and style new components:

`js
import tw from 'twin.macro'

const Input = tw.inputborder hover:border-black
`

And clone and style existing components:

`js
const PurpleInput = tw(Input)border-purple-500
`

Switch to the styled import to add conditional styling:

`js
import tw, { styled } from 'twin.macro'

const StyledInput = styled.input(({ hasBorder }) => [
color: black;,
hasBorder && twborder-purple-500,
])
const Input = () =>
`

Or use backticks to mix with sass styles:

`js
import tw, { styled } from 'twin.macro'

const StyledInput = styled.input
color: black;
${({ hasBorder }) => hasBorder && twborder-purple-500}

const Input = () =>
`

How it works

When babel runs over your javascript or typescript files at compile time, twin grabs your classes and converts them into css objects.
These css objects are then passed into your chosen css-in-js library without the need for an extra client-side bundle:

`js
import tw from 'twin.macro'

twtext-sm md:text-lg

// ↓ ↓ ↓ ↓ ↓ ↓

{
fontSize: '0.875rem',
'@media (min-width: 768px)': {
fontSize: '1.125rem',
},
}
`

Features

👌 Simple imports - Twin collapses imports from common styling libraries into a single import:

`diff
- import styled from '@emotion/styled'
- import css from '@emotion/react'
+ import { styled, css } from 'twin.macro'
`

🐹 Adds no size to your build - Twin converts the classes you’ve used into css objects using Babel and then compiles away, leaving no runtime code

🍱 Apply variants to multiple classes at once with variant groups

`js
import 'twin.macro'

const interactionStyles = () => (