{"repo":"ben-rogerson/twin.macro","free":true,"listed":false,"github":"https://github.com/ben-rogerson/twin.macro","clone":"git clone https://github.com/ben-rogerson/twin.macro.git","description":"🦹‍♂️ 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.","language":"TypeScript","stars":8029,"topics":["tailwind","tailwindcss","css-in-js","babel-macro","tailwind-css","styling-css-in-js","emotionjs","emotion","twin","babel"],"license":"MIT","category":"ui-components","readme_excerpt":"The magic of Tailwind with the flexibility of css-in-js. --- Style jsx elements using Tailwind classes: Nest Twin’s tw import within a css prop to add conditional styles: Or mix sass styles with the css import: Styled Components 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: Or use backticks to mix with sass styles: How it works 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: Features 👌 Simple imports - 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 🍱 Apply variants to multiple classes at once with variant groups 🛎 Helpful suggestions for mistypings - Twin chimes in with class and variant values from your Tailwind config: 🖌️ Use the theme import to add values from your tailwind config See more examples using the theme import → 💡 Works with the official tailwind vscode plugin - Avoid having to look up your classes with auto-completions straight from your Tailwind config - setup instructions → 💥 Add !important to any class with a trailing or leading bang! Add !important to multiple cl","default_branch":null,"files":null,"tree":[],"storefront":"/r/ben-rogerson","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ben-rogerson/twin.macro/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}