使用 Tailwind CSS 编写组件变体的不同方法

程序猿 • 2025年12月19日 20:28:53 • 用户投稿

问题

传统上，当使用 tailwind css 编写组件变体时，我会使用简单的类映射将 prop 值映射到组件插槽：

type ttheme = "default" | "secondary";interface icomponentslot {  root: string;  accent: string;}const theme_map: record = {  default: {    root: "bg-red hover:background-pink",    accent: "text-blue hover:text-green",  },  secondary: {    root: "bg-green hover:background-black",    accent: "text-pink hover:text-white",  }}  /**/

这种方法的问题是保持所需的类相互一致，确保每个变体都具有所有必需的类，特别是在更复杂的组件中。在我们想要跨不同组件插槽共享样式（例如文本颜色）的组件中，需要我们单独更新每个插槽。

tailwind 的局限性

tailwind 通过扫描代码库和匹配字符串来生成实用程序类，这意味着虽然 tailwind 可以从任意值创建类，但我们无法在不创建安全列表的情况下动态启动它们。所以这行不通：

// .tstype ttheme = "default" | "secondary";const colors: record = {  default: "red",  secondary: "blue",}// .html

但是，我们可以通过利用 css 变量来模仿所需的行为，这是 tailwind 在其许多类的底层使用的东西。我们可以使用以下语法通过 tailwind 中的类设置变量： [–my-variable-key:–my-variable-value]
那么我们如何更新上面的代码示例以使用动态值？

// .tstype ttheme = "default" | "secondary";const colors: record = {  default: "[--text-color:red]",  secondary: "[--text-color:blue]",}// .html

解决最初的问题

现在我们了解了 tailwind 的局限性，我们需要研究解决由类映射方法引起的初始问题的方法。我们可以从简化我们的类映射开始：

type ttheme = "default" | "secondary";interface icomponentslot {  root: string;  accent: string;}const theme_map: record = {  default: "[--backgound:red] [--hover__background:pink] [--text:blue] [--hover__text:green]",  secondary: "[--backgound:green] [--hover__background:black] [--text:pink] [--hover__text:white]",}  /**/

不幸的是，仅此并不能解决我们的问题，我们仍然无法确保我们已经设置了正确显示每个变体所需的所有类。那么我们如何才能更进一步呢？好吧，我们可以开始编写一个接口来强制我们设置指定的值：

interface icomponentthemevariables {  backgound: string;  hover__backgound: string;  text: string;  hover__text: string;}const theme_map: record = {  default: {    backgound: "[--backgound:red]",    text: "[--hover__background:pink]",    hover__background: "[--text:blue]",    hover__text:"[--hover__text:green]",  },  secondary: {    backgound: "[--backgound:green]",    text: "[--hover__background:black]",    hover__background: "[--text:pink]",    hover__text:"[--hover__text:white]",  },}

所以这可行，但是，仍然有一个问题，没有什么可以阻止我们混合字符串值。例如，我们可能不小心将关键背景设置为 [–text:blue]。

所以也许我们也应该输入我们的值。我们无法输入整个类，这将是维护的噩梦，那么如果我们输入颜色并编写一个辅助方法来生成 css 变量会怎么样：

type tcolor = "red" | "pink" | "blue" | "green" | "black" | "white";interface icomponentthemevariables {  backgound: tcolor;  hover__backgound: tcolor;  text: tcolor;  hover__text: tcolor;}// example variablemap method at the end of the articleconst theme_map: record = {  default: variablemap({    backgound: "red",    text: "pink",    hover__background: "blue",    hover__text:"green",  }),  secondary: variablemap({    backgound: "green",    text: "black",    hover__background: "pink",    hover__text:"white",  }),}

好的，这太棒了，我们可以确保始终为组件的每个变体设置正确的变量。但是等等，我们刚刚遇到了 tailwind 发现的最初问题，我们不能只生成类，tailwind 不会选择它们。那么我们该如何解决这个问题呢？

js 中的 css 怎么样？

js 中的 css 似乎是显而易见的答案，只需生成一个类，该类创建具有正确变量的自定义类。但有一个障碍，javascript 在客户端上运行，这会导致“flash”，组件最初加载时没有设置变量，然后更新才能正确显示。

立即学习“前端免费学习笔记（深入）”；

js 库中的 css 如何处理这个问题？

像 emotion 这样的库通过插入有关组件的内联样式标签来处理这个问题：

      .css-21cs4 { font-size: 12 }    text

这对我来说不是正确的方法。

那么我们如何解决这个问题呢？

我正在使用 vue，这让我走上了 css 中 v-bind 的道路，这是 vue 中将 javascript 绑定为 css 值的功能。过去我只很少使用这个功能，并且从未深入研究过它的用途。 css 中的 v-bind 只是在相关元素上设置内联样式。

这让我想起了几个月前我从 tailwind css 的创建者 adam wathan 那里看到的一条推文：

那么这对我们有什么帮助呢？好吧，虽然我们无法动态生成 tailwind 类，但我们可以动态生成内联样式并使用 tailwind 类中的这些内联样式。那会是什么样子？

type tcolor = "red" | "pink" | "blue" | "green" | "black" | "white";interface icomponentthemevariables {  backgound: tcolor;  hover__backgound: tcolor;  text: tcolor;  hover__text: tcolor;}// example variablemap method at the end of the articleconst theme_map: record = {  default: variablemap({    backgound: "red",    text: "pink",    hover__background: "blue",    hover__text: "green",  }),  secondary: variablemap({    backgound: "green",    text: "black",    hover__background: "pink",    hover__text: "white",  }),}  /**/
/*output:  ...
*/

结论

通过结合 typescript、css 变量和内联样式的功能，我们能够确保在使用 tailwind css 时，我们组件的每个变体都会设置每个选项并具有正确的类型。

这是一种实验性方法，我相信会有一些强烈的意见。我确信这是最好的方法吗？现阶段，我不确定，但我认为它有腿。

如果您觉得这篇文章有趣或有用，请在 bluesky（我在这里最活跃）、medium、dev 和/或 twitter 上关注我。

示例：变量映射

// variableMap exampleexport const variableMap = <T extends Record>(  map: T): string => {  const styles: string[] = [];  Object.entries(map).forEach(([key, value]) => {    const wrappedValue = value.startsWith("--") ? `var(${value})` : value;    const variableClass = `--${key}: ${wrappedValue};`;    styles.push(variableClass);  });  return styles.join(" ");};

以上就是使用 Tailwind CSS 编写组件变体的不同方法的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498459.html

ai css twitter typescript vue

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

Three.js模型渲染优化：如何提升模型清晰度和视觉效果？

上一篇 2025年12月19日 20:28:48

从 useEffect 到 React Query：在 React 中实现数据管理现代化

下一篇 2025年12月19日 20:29:13

首个对话式音乐创作 Agent“Tunee”正式公测

趣丸科技旗下天谱乐团队自主研发的国内首款对话式音乐创作agent“tunee”近日正式启动全球公测，全面向公众开放使用。据悉，用户只需通过自然语言描述自己的音乐设想，即便表达模糊，Tunee也能自动完成需求解析、方案设计到实际作曲的完整流程，最终输出契合用户意图的原创音乐作品。 Tunee采用先进…

程序猿
2026年9月25日 • 用户投稿
5000
Debian syslog如何定制报警机制

本文介绍如何在Debian系统中定制syslog报警机制，利用rsyslog实现更灵活的日志监控和告警。首先，确保已安装rsyslog： sudo apt-get updatesudo apt-get install rsyslog 接下来，修改rsyslog配置文件，/etc/rsyslog.c…

程序猿
2026年9月25日 • 用户投稿
1000
对话逐际动力张巍：造机器人很容易，关键是用起来

“让天下没有难落地的机器人。” 在这样向量子位表达定位和使命后，逐际动力”解释了”为何会成为阿里投资的第一家具身智能机器人公司。在这样解释定位和使命后，量子位大概感受到了逐际动力被投资的原因—— 至少是成为阿里第一个具身智能投资项目的原因。实际上，…

程序猿
2026年9月25日 • 用户投稿
5000
修改 Android KeyStore 中 KeyPair 的用途

本文档介绍了如何在 Android KeyStore 中修改现有 KeyPair 的用途，使其支持密钥协商 (Key Agreement) 操作。通过示例代码展示了如何利用 KeyStore.setEntry 方法在 Android 13 (API 33) 及以上版本中导入 KeyPair 并设置所…

程序猿
2026年9月25日 • 用户投稿
6000
专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦成 8000 元内全能首选

随着旅行摄影与短视频创作的需求激增，便携微单已成为多数用户的核心影像工具。面对 8000元以下微单市场的繁杂选择，专业影像评测团队通过150小时实测（涵盖画质解析力、防抖稳定性、低光对焦等 15 项核心指标），结合近万份用户口碑反馈，筛选出 3 款高潜力机型。其中佳能 R50V 凭借“画质无短板、便…

程序猿
2026年9月25日 • 用户投稿
2000
AI Overviews是否具备个性化推荐机制个性推荐背后的逻辑与调整方法

AI Overviews在提供信息摘要时，确实融入了个性化推荐机制。本文将深入探讨这一机制的原理、其背后的逻辑以及用户可能影响或理解其个性化倾向的一些方法。我们将分步骤解析这一过程，帮助用户更好地理解和利用AI Overviews的功能。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无…

程序猿
2026年9月25日 • 用户投稿
0000
并发处理共享列表并收集结果的方案

本文旨在介绍如何利用 Java 并行流高效地处理大型列表，尤其是在每个元素的处理过程耗时较长的情况下。并行流能够将列表分割成多个子任务，并在多个线程上并发执行，从而显著提升处理速度。但同时，并发编程也带来了共享资源同步的问题，需要谨慎处理。使用并行流并发处理列表假设我们有一个 Foo 类，其 p…

程序猿
2026年9月25日 • 用户投稿
0000
用户投稿

参加PHP+MySQL就业培训后能获得的岗位有哪些

参加php+mysql就业培训后，你可以获得以下岗位：1. web开发工程师，利用php和mysql开发动态网站和web应用程序；2. 后端开发工程师，使用php构建后端服务和api；3. 全栈开发工程师，结合前端技术进行全站开发；4. 数据库管理员，负责mysql数据库的设计、优化和维护；5. 软…

程序猿
2026年9月25日
4000
高效并发处理共享列表与结果收集的Java教程

本文介绍了如何利用Java并发特性，特别是并行流（Parallel Streams），来高效处理共享列表，并将处理结果进行收集。针对耗时操作，通过将列表分割成子列表，并利用并行流并发执行，可以显著提高处理效率。同时，强调了在并发环境下对共享资源进行同步的重要性，并提供了收集处理结果的示例代码。在处…

程序猿
2026年9月25日 • 用户投稿
0000
AI Overviews能否用于电商搜索产品信息摘要在购物场景下的使用体验

随着人工智能技术的发展，AI Overviews作为一种通过整合信息提供摘要的搜索功能，正逐渐改变用户获取信息的方式。本文将探讨AI Overviews是否以及如何在电商搜索场景下应用，特别关注产品信息摘要对于用户购物体验的影响。我们将讲解其运作原理、潜在优势、面临挑战以及优化体验的过程，帮助理解这…

程序猿
2026年9月25日 • 用户投稿
0000
AI 图像水印失守！开源工具 5 分钟内抹除所有水印

ai 图像的水印技术正面临重大挑战！一种名为 UnMarker 的新型去水印技术横空出世，宣称可在短短5分钟内清除市面上绝大多数 AI 生成图像中的水印。该技术已成功完全破解谷歌的 HiDDeN 水印系统，对另一款 Google 水印技术 SynthID 的破解率也达到了79%。更令人震惊的是…

程序猿
2026年9月25日 • 用户投稿
0000
AI Overviews与传统摘要工具有何不同模型机制与结果效果的差异分析

本文将探讨AI Overviews与传统摘要工具之间的核心差异，重点分析它们在模型机制和结果效果上的不同。通过理解这两种技术的底层原理和最终呈现形式，用户可以更好地认识到它们各自的优势和应用场景。文章将分步讲解这些差异点，帮助您掌握如何区分并理解它们的工作方式。 ☞☞☞AI 智能聊天, 问答助手, …

程序猿
2026年9月25日 • 用户投稿
0000
如何在微服务之间共享静态数据

微服务架构的本质决定了微服务之间无法直接共享静态变量。正如上面摘要所说，每个微服务都是一个独立的进程，拥有自己的内存空间，静态变量只在其所属的进程内有效。试图在一个微服务中访问另一个微服务的静态变量，就像试图在一个独立的Java程序中访问另一个程序的变量一样，是不可能的。微服务架构的独立性微服务…

程序猿
2026年9月25日 • 用户投稿
1000
AI Overviews在多标签页面下怎么使用页面复杂结构下的信息筛选能力说明

本文旨在说明AI Overviews如何在处理多标签页面的信息过载以及复杂网页结构的阅读挑战中发挥作用。我们将探讨AI Overviews如何帮助用户快速掌握多个来源或单个冗长页面中的关键信息，通过智能化的方式进行信息筛选和整合，从而提升信息获取的效率。文章将提供一个基本的操作流程说明，方便用户理解…

程序猿
2026年9月25日 • 用户投稿
1000
用户投稿

Linux系统与Windows系统在资源管理机制上有何差异？

Linux在服务器领域因cgroups、procfs、ulimit和可调内核参数等机制，提供对资源的精细控制与高透明度；而Windows则通过WDDM、DirectX、优先调度UI线程及完善的驱动生态，优化桌面与多媒体体验，注重流畅性与兼容性。 Linux系统和Windows系统在资源管理机制上存在…

程序猿
2026年9月25日
2000
用户投稿

2025年输入指令就可以生成图片的ai免费工具有哪些？

2025年免费AI图像生成工具将主要来自开源项目、大公司免费额度、独立开发者工具及云平台免费套餐，如Stable Diffusion类开源模型、谷歌微软等集成服务、专注特定领域的在线工具，以及利用AWS、Azure等云平台资源，但通常存在生成速度慢、图像质量低、功能受限、使用次数限制、隐私风险和水印…

程序猿
2026年9月25日
2000
Micronaut中动态数据结构的类型安全验证策略

本文探讨了在Micronaut应用中，如何有效处理具有动态属性和类型依赖验证的类。通过引入多态接口、特化实现类以及自定义Jackson反序列化器，我们能够实现对复杂动态数据结构的类型安全解析与精细化验证，确保数据完整性和业务规则的正确执行。动态数据结构的验证挑战在现代微服务架构中，经常会遇到需要…

程序猿
2026年9月25日 • 用户投稿
10000
从制造到“质造”，格创东智助力TCL摘得中国质量奖

9月16日，tcl科技凭借“极致、领先、协同”的质量管理模式，成功斩获第五届中国质量奖，成为本届广东省及大湾区唯一获此殊荣的企业。这一奖项不仅彰显了tcl在质量管理体系上的卓越成就，也凸显了其智能制造与数字化转型背后的中坚力量——格创东智，在工业质量数智化领域所发挥的关键作用。作为TCL战略孵化的…

程序猿
2026年9月25日 • 用户投稿
9000
DeepSeek是否有开源版本官方提供的开源模型及使用限制说明

对于关注大模型技术的用户而言，了解DeepSeek是否提供开源模型及其相关信息是重要的。DeepSeek确实提供了部分模型作为开源版本，供社区学习和使用。本文旨在详细介绍DeepSeek官方提供的开源模型系列，说明获取这些模型的途径，并重点阐述使用这些开源模型时需要注意的官方限制与许可说明，帮助用户…

程序猿
2026年9月25日 • 用户投稿
0000
利用AWS Pinpoint高效发送注册验证码（OTP）教程

本文旨在指导开发者如何高效利用AWS Pinpoint服务发送用户注册验证码（OTP），解决传统AWS SNS在处理动态、未预注册手机号时的局限性。我们将深入探讨Pinpoint作为首选方案的优势，提供具体实现步骤和代码示例，并分享最佳实践，确保OTP消息的可靠、快速送达。理解注册验证码（OTP）…

程序猿
2026年9月25日 • 用户投稿
1000