CNAT

类名修改工具。系统地更改代码库中所有类名。

安装

cargo install cnat

npm install -g cnat

为什么？

因为您加入了一个项目，该项目有一些糟糕的老式tailwind配置：奇怪的定制间距配置、奇怪的尺寸、一些当前的tailwind默认颜色（例如slate）不可用，因为配置是针对旧版本的tailwind等...

所以您不能简单地从互联网上复制/粘贴tailwind类名或使用来自UI组件库的类名。比如说您想使用 shadcn/ui；不行！

您想对此做一些处理，但这太冒险也太耗时了。您希望逐步进行，以保护您的精神。

最佳解决方案是在保留旧配置的同时弃用它们；因此，您在旧的 tailwind.config.js 中添加一个前缀 legacy-。

弃用步骤

在项目根目录下。运行

echo '@tailwind base; @tailwind components; @tailwind utilities;' > temp.css
npx tailwindcss -i temp.css -o legacy-tw.css
cnat prefix -i legacy-tw.css --prefix 'legacy-' ./src

默认情况下，cnat prefix 将遍历所有 class=*、className=* 在jsx元素中和 className:* 在 React.createElement 调用中，在 ts|js|tsx|jsx 文件中。它将匹配源代码中与 legacy-tw.css 中找到的任何类（其中包含基于您的配置生成的所有样式）的任何类。

将旧配置的文件重命名为，tailwind.legacy.config.ts。

mv tailwind.config.ts tailwind.legacy.config.ts # or *.js if your tailwind config files aren't in typescript

在旧配置文件中添加前缀。

export default {
  prefix: "legacy-",
};

再次运行tailwind cli以重建旧css类。现在它们将具有前缀，因为 tailwind.legacy.config.ts 定义了 'legacy-'

npx tailwindcss -i temp.css -o legacy-tw.css -c tailwind.legacy.config.ts

然后，将旧css导入到全局css文件中。

@import "./legacy-tw.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* And whatever else you have in here */

现在您可以重新初始化新配置。

# You'd have to delete the current `tailwind.config.ts` if you haven't already.
npx tailwindcss init --ts

现在您可以呼吸了。一个全新的开始；忽略床底下的东西。

用法

Systematically apply certain modifications to classes, class names, used in your frontend codebase.

Usage: cnat <COMMAND>

Commands:
  prefix      Apply a prefix to all the tailwind classes in every js file in a project
  completion  Generate completions for a specified shell
  help        Print this message or the help of the given subcommand(s)

Options:
  -h, --help     Print help
  -V, --version  Print version

cnat prefix --help

Apply a prefix to all the tailwind classes in every js file in a project

Usage: cnat prefix [OPTIONS] -i <CSS_FILE> --prefix <PREFIX> <CONTEXT>

Arguments:
  <CONTEXT>  The root directory of the js/ts project

Options:
  -i <CSS_FILE>             The output css file generated by calling `npx tailwindcss -i input.css -o output.css`
  -p, --prefix <PREFIX>     The prefix to apply to all the tailwind class names found
  -s, --scopes <SCOPES>...  Define scope within which prefixing happens. Example: --scopes 'att:className,*ClassName prop:classes fn:cva' [default: "att:class,className fn:createElement"]
  -h, --help                Print help

作用域

您可能除了在 className="..." 之外的其他地方也有 tailwind 类，甚至还有 cva(...)。例如，mui 组件中的 classes 属性。

您可以使用 cnat 的 --scopes 或 -s 选项来定义查找类的位置。作用域的语法是 :<...values>

变体包括

• fn 用于目标函数调用（例如 'fn:cva')
• att 用于目标 JSX 属性（例如 'att:className')
• prop 用于目标 JSX 属性（例如 'prop:className')

值是字符串，您可以在开头或结尾使用通配符 *。例如 'att:className att:*ClassName' 将找到所有这些属性对应的类

<Btn
  className="w-10 bg-red"
  iconClassName="text-black"
  textClassName="text-xl"
/>

默认情况下，cnat 使用 --scopes 'att:class,className fn:createElement'

cnat prefix -i legacy-tw.css --prefix 'legacy-' ./src --scopes 'att:class,className fn:createElement'