前端开发工具【免费下载链接】twin.macro‍♂️ 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.项目地址https://gitcode.com/gh_mirrors/tw/twin.macro点击查看免费下载Twin.macro 将 Tailwind 的类名体系与 emotion、styled-components 等 css-in-js 方案融合在编译期把 Tailwind 类直接转换成 CSS 对象。本文是官方 prop 样式指南的深度讲解覆盖twprop 的基础用法、条件样式、样式覆盖、JSX 整洁化、多值变体、插值约束、任意变体/任意值与自定义 CSS 的完整实践读完即可在真实组件中落地一套可维护的 Tailwind css-in-js 样式方案。Basic styling用twprop 为 JSX 元素添加 Tailwind 类Twin 最基础的用法是把 Tailwind 类放进 JSX 元素的twprop无需任何函数调用import twin.macro const Component () ( div twflex w-full div tww-1/2/div div tww-1/2/div /div )使用要点适用场景仅当不需要条件样式时使用twprop它是静态样式的最高效表达触发机制任何来自twin.macro的 import 都会激活twprop 的处理包括import twin.macro这种副作用式导入免导入方案结合 babel-plugin-twin 可以省略导入语句直接使用tw和cssprop。从源码看twprop 的处理位于 src/macro/tw.ts 的handleTwProperty。当元素上不存在cssprop 时Twin 直接把tw属性替换为css属性src/macro/tw.ts当元素同时带有cssprop 时则调用mergeIntoCssAttribute把tw的样式合并进现有的css数组中src/macro/tw.ts。类名经由getStyles解析为 CSS 对象后再用astify生成 AST 节点。值得注意的错误提示handleTwProperty中明确断言twprop 只接受纯字符串如twtext-black或tw{text-black}传入表达式会被拒绝并给出修复建议src/macro/tw.ts。Conditional styling用cssprop 组合数组实现条件样式当需要根据状态切换样式时把样式嵌套进数组并用csspropimport tw from twin.macro const Component ({ hasBg }) ( div css{[ twflex w-full, // 先写基础样式 hasBg twbg-black, // 再追加条件样式 ]} div tww-1/2 / div tww-1/2 / /div )TypeScript 版本import tw from twin.macro interface ComponentProps { hasBg?: string } const Component ({ hasBg }: ComponentProps) ( div css{[ twflex w-full, // Add base styles first hasBg twbg-black, // Then add conditional styles ]} div tww-1/2 / div tww-1/2 / /div )三条关键认知cssprop 的所有权不在 Twin这个 prop 由你的 css-in-js 库emotion、styled-components 等提供Twin 只负责把tw模板字符串转成这些库能识别的样式对象/数组数组化组织把值放进数组便于在同一位置依次定义基础样式、条件样式和原生 css优先级由数组顺序自然决定模板字符串内多行书写在反引号template literals内可以用多行组织类名源码侧的expandVariantGroups会把换行符归一化为空格后展开src/core/lib/expandVariantGroups.ts。Overriding stylestwprop 后置覆盖如果元素同时带有cssprop 与twproptw会追加在css之后从而覆盖之前定义的样式import tw from twin.macro const Component () ( div css{twtext-white} twtext-black Has black text /div )这里css{twtext-white}先渲染白色文字随后twtext-black在编译期被合并到css数组的末尾src/macro/tw.ts 的isBeforeCssAttribute判断决定了tw在数组中的插入位置最终文字显示为黑色——利用合并顺序实现覆盖。Keeping jsx clean把样式提到对象中保持 JSX 整洁当类名集合变大时tw字符串会遮挡 JSX 中其他 prop 的可读性。此时可以把样式提升出来按命名分组放进一个styles对象import tw from twin.macro const styles { container: ({ hasBg }) [ twflex w-full, // Add base styles first hasBg twbg-black, // Then add conditional styles ], column: tww-1/2, } const Component ({ hasBg }) ( section css{styles.container({ hasBg })} div css{styles.column} / div css{styles.column} / /section )TypeScript 版本import tw from twin.macro interface ContainerProps { hasBg?: boolean; } const styles { container: ({ hasBg }: ContainerProps) [ twflex w-full, // Add base styles first hasBg twbg-black, // Then add conditional styles ], column: tww-1/2, } const Component ({ hasBg }: ContainerProps) ( section css{styles.container({ hasBg })} div css{styles.column} / div css{styles.column} / /section )这种模式的收益在于样式与 JSX 结构解耦函数型的命名条目如container可以接收 props 返回动态数组静态条目如column直接持有tw结果多个元素可复用同一个样式入口。Variants with many values用命名类集合 prop 驱动多值变体当某个变体有很多取值如variantlight/dark/etc时把各类样式放进命名对象再用 prop 索引取值import tw from twin.macro const containerVariants { // Named class sets light: twbg-white text-black, dark: twbg-black text-white, crazy: twbg-yellow-500 text-red-500, } const styles { container: ({ variant dark }) [ twflex w-full, containerVariants[variant], // Grab the variant style via a prop ], column: tww-1/2, } const Component ({ variant }) ( section css{styles.container({ variant })} div css{styles.column} / div css{styles.column} / /section )TypeScript 版本可以使用TwStyle类型约束tw块的类型import tw, { TwStyle } from twin.macro type WrapperVariant light | dark | crazy interface ContainerProps { variant?: WrapperVariant } const containerVariants: RecordWrapperVariant, TwStyle { // Named class sets light: twbg-white text-black, dark: twbg-black text-white, crazy: twbg-yellow-500 text-red-500, } const styles { container: ({ variant dark }: ContainerProps) [ twflex w-full, containerVariants[variant], // Grab the variant style via a prop ], column: tww-1/2, } const Component ({ variant }: ContainerProps) ( section css{styles.container({ variant })} div css{styles.column} / div css{styles.column} / /section )TwStyle在 types/index.d.ts 中定义为{ [key: string]: string | number | TwStyle }递归地描述 CSS 对象结构可对tw模板字符串的产物做类型标注。利用RecordWrapperVariant, TwStyle可以让“变体名 → 样式”的映射获得完整的类型检查未定义的变体名会在编译期直接报错。Interpolation workaroundBabel 限制与动态值的三种出路由于 Babel 无法在编译期得知运行时变量的值Tailwind 类和任意属性都不允许任何一部分被动态拼接。以下写法不会生效div twmt-${spacing sm ? 2 : 4} / // Wont work with tailwind classes div tw[margin-top:${spacing sm ? 2 : 4}rem] / // Wont work with arbitrary properties原因正如官方文档所释babel 不知道变量的值Twin 也就无法完成到 CSS 的转换。handleTwProperty中的断言逻辑会拦截这类非纯字符串用法并提示改用twtext-black形式src/macro/tw.ts。官方推荐以下三种替代方案方案一类定义 prop 索引import tw from twin.macro const styles { sm: twmt-2, lg: twmt-4 } const Component ({ spacing sm }) div css{styles[spacing]} /方案二theme导入 原生 css 对象import { theme } from twin.macro // Use theme values from your tailwind config const styles { sm: themespacing.2, lg: themespacing.4 } const Component ({ spacing sm }) ( div css{{ marginTop: styles[spacing] }} / )theme标签模板在 src/macro/theme.ts 的handleThemeFunction中处理它把theme调用标签模板或theme(colors.black)函数形式中的路径解析成来自 Tailwind 配置的具体值若路径在配置中匹配不到会直接断言报错。方案三退回原生 css可插值任意值import twin.macro const Component ({ width 5 }) div css{{ maxWidth: ${width}rem }} /原生 CSS 对象字面量不受编译期限制可以自由使用运行时插值是动态尺寸等场景的最终兜底。Custom selectors用任意变体书写自定义选择器方括号形式的任意变体Arbitrary variants可以按自定义选择器来定位元素import tw from twin.macro const buttonStyles tw bg-black [ i]:block [ span]:(text-blue-500 w-10) const Component () ( button css{buttonStyles} iIcon/i spanLabel/span /button )更多示例// Style the current element based on a theming/scoping className ;body classNamedark-theme div tw[.dark-theme ]:(bg-black text-white)Dark theme/div /body // Add custom group selectors ;button classNamegroup disabled span tw[.group:disabled ]:text-gray-500Text gray/span /button // Add custom height queries ;div tw[media (min-height: 800px)]:hidden This window is less than 800px height /div // Use custom at-rules like supports ;div tw[supports (display: grid)]:gridA grid/div // Style the current element based on a dynamic className const Component ({ isLarge }) ( div className{isLarge is-large} twtext-base [.is-large]:text-lg ... /div )这些写法背后的转换逻辑在 src/core/lib/convertClassName.ts 的sassifyArbitraryVariants中实现它会把无父选择器的任意变体自动补上例如[ i]变体推导为子元素选择器[media ...]、[supports ...]这类 at-rule 原样保留并把逗号分隔的多个选择器转义合并同时保持 Tailwind 能识别的方括号语法。这也解释了为什么[.group:disabled ]能把「父级.group处于:disabled状态」作为前置条件。Custom class values用任意值注入自定义类值许多动态类如top-*、mt-*都支持用方括号注入自定义值;div twtop-[calc(100vh - 2rem)] / // ↓ ↓ ↓ ↓ ↓ ↓ div css{{ top: calc(100vh - 2rem) }} /官方还针对任意值给出两个额外细节见 docs/arbitrary-values.md支持空格Twin 不受classNameprop 的空格限制twh-[calc(1000px - 4rem)]可以直接书写带空格的值也可以在多行模板字符串中使用还能配合变体组first:(h-[calc(1000px - 4rem)] mt-5)禁止动态值tw标签模板内的任意值同样不能动态拼接如twmt-[${size lg ? 22px : 17px}]不会生效必须写成完整类定义的条件选择css{[size lg ? twmt-[22px] : twmt-[17px]]}。Custom css从简单样式到高级 Sass 风格样式基础的自定义 CSS 可以用任意属性Arbitrary properties完成复杂场景则交给原生 css 或css导入。Simple css styling任意属性// Set css variables div tw[--my-width-variable:calc(100vw - 10rem)] / // Set vendor prefixes div tw[-webkit-line-clamp:3] / // Set grid areas div tw[grid-area:1 / 1 / 4 / 2] /任意属性可以和变体或 Twin 的分组特性组合div twblock md:(relative [grid-area:1 / 1 / 4 / 2]) /任意属性同样支持tw导入标签模板形式import tw from twin.macro ;div css{tw block md:(relative [grid-area:1 / 1 / 4 / 2]) } /两个实用规则加!前缀可使自定义 css 生效为!important![grid-area:1 / 1 / 4 / 2]任意属性支持驼峰命名属性[gridArea:1 / 1 / 4 / 2]。分组语法如md:(...)的展开逻辑见 src/core/lib/expandVariantGroups.ts它按分隔符切分类名把括号内的类逐一追加到前面的变体上同时把!important的前后置位置归一化。Advanced css stylingcss导入与 Sass 风格语法cssprop 接受类似 Sass 的语法允许同时混写自定义 CSS 和带配置值的 Tailwind 样式import tw, { css, theme } from twin.macro const Components () ( input css{[ twtext-blue-500 border-2, css -webkit-tap-highlight-color: transparent; /* add css styles */ background-color: ${themecolors.red.500}; /* use the theme import to add config values */ ::selection { ${twtext-purple-500}; /* style with tailwind classes */ } , ]} / )不过官方建议用对象形式往往更干净可以避免上面模板插值带来的语法噪音import tw, { css, theme } from twin.macro const Components () ( input css{[ twtext-blue-500 border-2, css({ WebkitTapHighlightColor: transparent, // css properties are camelCased backgroundColor: themecolors.red.500, // values don’t require interpolation ::selection: twtext-purple-500, // single line tailwind selector styling }), ]} / )对象形式下CSS 属性走驼峰命名WebkitTapHighlightColortheme值不需要插值直接作为值使用选择器::selection可以一行内嵌套一个tw结果——整个数组依然保持「基础样式在前、扩展样式在后」的顺序。css导入在 src/macro/css.ts 的addCssImport中按需注入仅当源码里真的使用了css引用且尚未存在同名导入时才会把css从对应 css-in-js 库导入进来。深入原理编译期管线与相关配置项把以上用法串起来看Twin 的编译管线大致是tw/css的 AST 引用src/macro/tw.ts、src/macro/css.ts→ 类名字符串交给 src/core/getStyles.ts 解析 → 经convertClassName归一化任意变体/任意值/主题值src/core/lib/convertClassName.ts→ 最终产物替换为 css-in-js 库可消费的样式对象。调试时可在 Twin 配置中开启debug: true查看类名转换前后的差异。几个与本文用法强相关的 Twin 配置项默认值见 src/core/lib/twinConfig.ts完整说明见 docs/options.mddataTwProp/dataCsProp默认在开发环境为true把原始类名写入data-tw/data-cs属性便于调试定位可设为all让生产环境也保留sassyPseudo把hover:这类伪类变体转成:hover的 Sass 风格styled-components 与 goober 预设默认开启disableCsProp默认true用于关闭过时的cspropmoveTwPropToStyled/convertHtmlElementToStyledsolid 与 stitches 预设默认开启会把twprop 迁移为 styled 组件定义进一步把样式从 JSX 中移走对应 src/macro/tw.ts 的moveTwPropToStyled。总结选择哪种样式写法场景推荐写法静态样式tw...prop条件样式css{[twbase, condition twcond]}样式覆盖twprop 写在cssprop 之后JSX 变乱提升为styles命名对象可接收 props多值变体命名类集合对象 RecordVariant, TwStyle类型约束动态值prop 索引类集合 /theme导入 / 原生 css 对象自定义选择器方括号任意变体[ i]:block、[.dark-theme ]:...自定义类值方括号任意值top-[calc(100vh - 2rem)]简单自定义 css任意属性[grid-area:1 / 1 / 4 / 2]高级自定义 csscss标签模板或css({...})对象 theme值关联的进阶阅读Styled component guide用 styled-components 高效工作的必读指南、Arbitrary values任意值语法细节与 Theming with css variablescss 变量主题化。赞分享前端开发工具【免费下载链接】twin.macro‍♂️ 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.项目地址https://gitcode.com/gh_mirrors/tw/twin.macro点击查看免费下载相关推荐PowerToys FancyZones 窗口分区入门教程3 步做出你的第一个多屏布局PowerToys FancyZones 窗口分区入门教程3 步做出你的第一个多屏布局 一整天都在切窗口还是切不到顺手的位置想看参考文档就得盖住代码会议桌面应用开发工具pydata-sphinx-theme配置完全教程从基础安装到高级定制pydata sphinx theme配置完全教程从基础安装到高级定制 想要为您的Python数据科学文档打造专业美观的界面吗pydata sphinx tStencil Prop 属性系统深度解析从 prop-cmp 组件看属性绑定、只读校验与模式化样式Stencil Prop 属性系统深度解析从 prop cmp 组件看属性绑定、只读校验与模式化样式 prop cmp 是 Stencil 仓库 test/开发工具前端前端构建上一篇Dozzle 容器过滤指南通过 --filter 与 DOZZLE_FILTER 精确控制可见容器下一篇Flipper Zero 回放 Nashone 无线插头 433MHz 信号RAW Sub-GHz 文件逐字段解析与开关实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考