# ben-rogerson/twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

Repository: https://github.com/ben-rogerson/twin.macro
Canonical: https://ross.abutalabs.com/products/twinmacro
Language: TypeScript
License: MIT
License Family: permissive
Topics: tailwind, tailwindcss, css-in-js, babel-macro, tailwind-css, styling-css-in-js, emotionjs, emotion, twin, babel, styled-components, styling-react, react, reactjs, tailwind-in-js, stitches, goober, solidjs
Last push: 2026-03-22T03:38:39+00:00

## Health v2 (maintenance only)
Score: 56/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 73, release rhythm 8, longevity 100
- inputs: {"age_days": 2387, "days_push": 164, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 8027, forks 179 (observed 2026-08-28T04:10:11.933852+00:00)

## What it is
Twin.macro is a Babel macro that compiles Tailwind CSS classes into CSS-in-JS objects at build time, supporting libraries like emotion, styled-components, stitches, and goober. It lets you style React and Solid components with Tailwind's `tw` prop and template literals without shipping a client-side Tailwind bundle.

## Use cases
- use tailwind classes with styled-components
- style react components with tailwind and emotion
- compile tailwind classes to css-in-js at build time
- conditionally apply tailwind styles in javascript
- avoid shipping tailwind runtime bundle
- mix sass styles with tailwind utilities

## When to choose
- you use a css-in-js library and want tailwind's utility classes
- you need conditional or dynamic tailwind styling in components
- you want tailwind styles compiled at build time with no runtime css

## When to avoid
- you use plain tailwind without css-in-js
- your bundler doesn't support babel macros
- you prefer zero-runtime alternatives like vanilla tailwind or linaria

## Facets
- artifact type: library
- maturity: active
- function: css-framework, build-tool, ui-components
- domain: frontend, web-development, web-design
- platform: browser, cross-platform
- tags: tailwindcss, css-in-js, babel-macro, styled-components, emotion, stitches, goober, react, solidjs, nodejs

## Member repositories
- ben-rogerson/twin.macro (main) score 56

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:11.933852+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:31:48.562842+00:00, confidence not recorded.
  - readme: https://github.com/ben-rogerson/twin.macro (fetched 2026-08-28T04:10:11.933852+00:00, sha 3a091c7bf1cb)
  - registry_npm: https://registry.npmjs.org/twin.macro (fetched 2026-08-29T08:29:34.494877+00:00, sha fc89baab3191)
- Data as of 2026-08-30T08:39:29.467469+00:00.