Zwilling

Replacement for twin.macro's tw function. Just use zw instead of tw everywhere.

• Source-Code: zwilling/index.tsx
• Example-Page: pages/index.tsx

Installation

npm i zwilling
# or
yarn add zwilling
# or
pnpm add zwilling

vanilla:

// lib/zw.ts
import { Zwilling } from 'zwilling'

export const zw = Zwilling()

// pages/demo.tsx
const StyledLink = zw.a`underline`

with clsx (recommended):

// lib/zw.ts
import clsx, { ClassValue } from 'clsx'
import { Zwilling } from 'zwilling'

export const zw = Zwilling<ClassValue>({
  classNameJoiner: clsx,
})

// pages/demo.tsx
const StyledLink = zw.a(['underline']) // clsx syntax allowed

define which props to pass:

// lib/zw.ts
import { Zwilling } from 'zwilling'

export const zw = Zwilling({
  passProp: (key) => !key.startsWith('$') // actually the default
})

// pages/demo.tsx
const StyledLink = zw.a<{ $active: boolean }>((props) =>
  props.$active ? 'underline' : 'no-underline'
)

<StyledLink $active={true}>Whoop</StyledLink>
// $active will not be passed to the DOM-Anchor-Element

Why?

• No need for Styled Components or Emotion
• No need for a babel plugin

Limitations

• Only implements tw from twin.macro
• No support for css from twin.macro
• No support for styled from twin.macro
• No support for theme from twin.macro
• In general: No support for CSS!
• No support for custom twin.macro syntax like md:(h-4 w-4)

Examples

const justAString = zw`text-red-500` // => 'text-red-500'

const StyledLink = zw.a`text-red-500`
return <StyledLink href="#typed">Whoop</StyledLink>

const darkMode = true
const StyledLink = zw.a`text-red-500 ${darkMode ? 'text-white' : 'text-black'}`

const darkMode = true
const StyledLink = zw.a`text-red-500 ${[
  // clsx style
  darkMode && 'text-white',
  { 'text-white': darkMode },
  [[[[['text-2xl']]]]],
]}`

const StyledLink = zw.a<{ $active: boolean }>`text-red-500 ${(props) =>
  props.$active && 'text-white'}`

const SuperButton = (props) => (
  <button className={props.className}>Super</button>
)
const StyledSuperButton = zw(SuperButton)`text-red-500`

const StyledLink = zw.a(['bg-purple-500', { 'rotate-45': true }])

const StyledLink = zw.a<{ $active: boolean }>(
  (p) => p.$active && 'bg-purple-500'
)

const NotSoStyledLink = zw.a()
return <NotSoStyledLink className={{ 'bg-purple-500': true }} />

// Combine with styled-components if you are a madman (or have legacy code):
const DoubleStyled = styled(
  zw.a`bg-purple-500` // tailwind here
)`
  text-decoration: underline; /* CSS here */
`

import { cva } from 'class-variance-authority'

const buttonVariants = cva('', {
  variants: {
    color: {
      red: 'bg-red-500',
      green: 'bg-green-500',
    },
  },
})
const VariantButton = zw.a(buttonVariants)

Development

# Install:
pnpm i

# Run once:
pnpm build
pnpm demo

# After every change to src:
pnpm build
pnpm demo