Twin blends the magic of Tailwind with the flexibility of CSS-in-js (emotion, styled-components, stitches, and goober) at build time. When babel runs over your javascript or typescript files at compile time, twin grabs your classes and converts them into CSS objects. These CSS objects are then passed into your chosen CSS-in-js library without the need for an extra client-side bundle. Twin collapses imports from common styling libraries into a single import. Adds no size to your build. Twin converts the classes you’ve used into CSS objects using Babel and then compiles away, leaving no runtime code. Twin chimes in with class and variant values from your Tailwind config. Works with the official tailwind vscode plugin. Avoid having to look up your classes with auto-completion straight from your Tailwind config. Apply variants to multiple classes at once with variant groups.
Features
- Style jsx elements using Tailwind classes
- Nest Twin’s tw import within a css prop to add conditional styles
- Mix sass styles with the css import
- You can also use the tw import to create and style new components
- And clone and style existing components
- Switch to the styled import to add conditional styling
Project Samples
