tx
编译时生成可读性更强的 Tailwind CSS 类名工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tx。 它的用途是：编译时生成可读性更强的 Tailwind CSS 类名工具 完整的 Skill 内容见：https://321skill.com/skills/tx/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用 Next.js 和 Tailwind CSS 开发一个按钮组件，需要根据状态（active, disabled）和尺寸（sm, lg）改变样式，现在用了一长串 className 和 clsx，感觉很乱，怎么用 tx 优化？” 它会指导你将 `className` 替换为 `tx` 属性，使用分组语法合并相同前缀的类（如 `hover:(bg-blue-500 text-white)`），并利用数组和条件表达式内联处理不同状态，最后建议运行 ESLint 自动修复来整理格式和验证类名。
介绍
tx 是一个旨在提升 Tailwind CSS 开发体验的编译时工具。它主要解决了在 JSX 中使用原生 Tailwind 时，因类名重复、条件逻辑复杂和可读性差而导致的维护困难问题。
通过将 JSX 中的 className 替换为 tx 属性，并引入分组语法（如 hover:(text-white bg-forest-800)），开发者可以编写出结构更清晰、更易于理解和维护的样式代码。数组和条件语句可以直接在 tx 中使用，无需依赖 clsx 等额外工具。
它非常适合追求代码整洁度和开发效率的前端或全栈开发者，尤其是在使用 React/Next.js 技术栈并重度依赖 Tailwind CSS 的项目中。对于需要频繁调整样式或进行代码审查的团队，tx 能显著提升协作体验。
建议在现有项目中逐步迁移，先替换 className 为 tx，然后利用其 ESLint 插件的自动修复功能来整理和验证类名。需要注意，其 SWC 插件版本与 Next.js 版本绑定，升级框架时需检查兼容性。
核心特点
与同类工具（如 clsx, classnames）相比，tx 的核心区别在于它在编译时（而非运行时）通过 SWC 插件将分组语法和条件逻辑直接展开为标准的 Tailwind 类名字符串，实现了零运行时开销。同时，其深度集成的 ESLint 插件不仅能自动排序和分组类名，还能根据你的 Tailwind 配置文件验证类名有效性，这是纯运行时工具无法提供的安全性保障。
注意事项
由于深度绑定 SWC 和特定版本的 Next.js，在不支持 SWC 或使用其他框架（如 Vite + React）的项目中集成可能较为复杂或受限。
常见问题
tx 和直接在 className 里用 clsx 有什么区别？
tx 在编译时将分组语法和条件数组展开为纯字符串，无运行时成本；而 clsx 是运行时函数。tx 还提供 ESLint 自动排序、分组和类名验证功能。
tx 能用在 Vue 或 Svelte 项目里吗？
目前官方主要支持 React/JSX 生态（通过 SWC 插件），对于 Vue 或 Svelte 尚无官方支持，可能需要进行适配或寻找替代方案。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tx/raw/index.md 读取 tx 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tx/raw/index.md（查看排版版本）