twin.macro

Twin.macro blends Tailwind CSS with CSS-in-JS at compile time. When Babel processes JavaScript or TypeScript files, Twin takes classes written in tw props, tw imports, or styled calls and turns them into CSS objects. Those objects are passed to a chosen CSS-in-JS library, so the classes do not need an extra client-side bundle. The README shows several usage patterns. You can style JSX elements directly with a tw prop, such as an input element using 'border hover:border-black'. You can import tw and nest it inside a css prop for conditional styles, combine it with css templates and Sass-like syntax, create components with tw.input, clone existing components with tw(Input), and use styled with conditional styling. Imports from common styling libraries can be collapsed into a single import from twin.macro. Twin supports variant groups to apply prefixes to multiple classes at once, including hover, focus, responsive breakpoints, before pseudo-elements, stacked variants, and nested groups. It reports helpful suggestions when a class or variant value is mistyped, using values from the Tailwind config. The theme import exposes values from the Tailwind config. A trailing or leading exclamation mark adds !important to a class, and bracket groups can apply !important to multiple classes. The project works with emotion, styled-components, solid-styled-components, stitches, and goober. The README links examples for Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, workspaces with shared UI components, and HeadlessUI. It also mentions compatibility with the official Tailwind VS Code plugin and links community resources, including Discord, documentation guides on prop styling, styled components, options, advanced theming, breakpoint syncing, and VS Code snippets/plugins. Twin is distributed as an npm package.