Twin.macro is a Babel macro that integrates Tailwind CSS with CSS-in-JS libraries at build time, supporting emotion, styled-components, solid-styled-components, stitches, and goober. The project enables developers to write Tailwind utility classes within JavaScript and TypeScript files, which are then compiled into CSS objects during the build process, eliminating runtime overhead and bundle size penalties.
The core functionality allows developers to use Tailwind classes through a tw import that can be nested within css props for conditional styling or used to create and style components with styled-components. The macro supports mixing Sass styles with Tailwind classes and provides variant groups to apply variants across multiple classes simultaneously. Twin includes helpful error messages with suggestions for mistyped class names and variant values drawn from the Tailwind configuration, and it integrates with the official Tailwind VSCode plugin to enable autocomplete suggestions directly from the Tailwind config.
Key features include simplified imports that collapse multiple styling library imports into a single import statement, zero runtime bundle size impact since all conversions happen at compile time via Babel, the ability to add !important to classes using trailing or leading bang syntax, and access to theme values from the Tailwind configuration through a dedicated theme import. The project works across numerous modern development stacks and build tools, with documented examples for Parcel, Webpack, Preact, Create React App, and Vite, as well as advanced frameworks like Next.js, Blitz.js, Gatsby, and T3 App. Component library support includes examples for Storybook, yarn and npm workspaces, Rollup, and HeadlessUI.
According to GitGenius activity tracking, the repository shows a median issue and pull request response latency of 12.9 hours across nine tracked items, indicating active maintenance. The primary contributor is ben-rogerson with 30 tracked events, followed by ethanve with 4 events and LouisJackson with 3 events. The most active issue labels tracked include bug, feature request, and stitches-specific discussions. The repository maintains connections with other significant projects through overlapping contributors, including sveltejs/svelte, microsoft/vscode, and jaredpalmer/razzle.
The project provides comprehensive documentation including prop styling and styled component guides, configuration options, and an optional babel-plugin-twin for using tw and css props without explicit imports. Additional resources cover advanced theming with CSS variables, React breakpoint syncing with Tailwind, VSCode snippets for faster development, and community discussions about VSCode plugin compatibility. Twin originated from earlier work on babel-plugin-tailwind-components and maintains an active Discord community for announcements and styling discussions.
