ben-rogerson/twin.macro

Health v2 · maintenance only

Adoption not part of the score

8027 stars · 179 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

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

library · maturity active

css-framework build-tool ui-components frontend web-development web-design browser cross-platform tailwindcss css-in-js babel-macro styled-components emotion stitches goober react solidjs nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="ben-rogerson/twin.macro")