twin.macro

Twin.macro 在编译时将 Tailwind CSS 与 CSS-in-JS 相结合。当 Babel 处理 JavaScript 或 TypeScript 文件时，Twin 会将编写在 tw 属性、tw 导入或 styled 调用中的类转换为 CSS 对象。这些对象随后被传递给所选的 CSS-in-JS 库，因此这些类不需要额外的客户端 bundle。 README 展示了多种使用模式。你可以通过 tw 属性直接为 JSX 元素设置样式，例如为 input 元素使用 'border hover:border-black'。你可以导入 tw 并将其嵌套在 css 属性中以实现条件样式，将其与 css 模板和类 Sass 语法结合，使用 tw.input 创建组件，使用 tw(Input) 克隆现有组件，以及使用 styled 进行条件样式定义。来自常用样式库的导入可以合并为来自 twin.macro 的单个导入。 Twin 支持变体组（variant groups），可一次性为多个类应用前缀，包括 hover、focus、响应式断点、before 伪元素、堆叠变体和嵌套组。当类或变体值输入错误时，它会根据 Tailwind 配置提供有用的建议。theme 导入可公开 Tailwind 配置中的值。类的前缀或后缀感叹号会添加 !important，而方括号组可为多个类应用 !important。 该项目支持 emotion、styled-components、solid-styled-components、stitches 和 goober。README 提供了 Parcel、Webpack、Preact、Create React App、Vite、Jest/React Testing Library、Next.js、T3 App、Blitz.js、Gatsby、Storybook、具有共享 UI 组件的工作区以及 HeadlessUI 的示例链接。它还提到与官方 Tailwind VS Code 插件的兼容性，并链接了社区资源，包括 Discord、关于属性样式、styled 组件、选项、高级主题、断点同步以及 VS Code 代码片段/插件的文档指南。Twin 以 npm 包的形式分发。