twust

Twust是Rust中针对TailwindCSS类名的强大静态检查工具，在编译时进行检查。

目录

• 概述
• 安装
• 用法
• 问题陈述
• 解决方案
• 特性
• 与其他Rust库的比较
• tailwind.config.json 概述
• 贡献
• 许可

概述

twust 是一个Rust过程宏，它提供了对TailwindCSS类名的编译时验证。利用Rust宏系统的强大功能，twust 确保您只使用有效的TailwindCSS类名，防止运行时错误，并提高开发体验的健壮性。

安装

将 twust 添加到您的 Cargo.toml

[dependencies]
twust = "0.1.0"

用法

只需在TailwindCSS类字符串前加上 tw! 宏即可

use twust::tw;

let classes = tw!("bg-blue-500 hover:bg-blue-700");
    // You can override/extend color/background color in tailwind.config.json
tw!("bg-taxvhiti bg-tahiti-500 bg-tahiti bg-midnight bg-purple bg-red-50 bg-tahiti-800 border-s-tahiti-800");
tw!("md:text-red-50 text-slate-50 text-purple text-tahiti-500");
tw!("py-sm md:py-md tablet:py-sm lg:py-lg xl:py-xl");
tw!("group");
tw!("hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none");
tw!("group/edit block invisible md:hover:bg-slate-200 group-hover/item:visible");
tw!("group-[:nth-of-type(3)_&]:block group-hover/edit:text-gray-700 group-[:nth-of-type(3)_&]:block");
tw!("scroll-m-15 group-aria-[sort=ascending]:rotate-0");

// Even scroll margin can also be configured, here we add, sm and md under the Spacing/scrollMargin field in the config file
tw!("scroll-mx-sm scroll-mx-md");
tw!("px-[-45px] px-[-45cm] px-[-45rem] px-[-45em] px-[-45%] px-[-45vh]");
tw!("m-4 last:first:invalid:last:first:p-4 last:m-4 pb-[calc(100%-34px)] pb-[23px] [mask-type:luminance]
    [mask-type:luminance] hover:[mask-type:alpha] lg:[--scroll-offset:44px] oyelowo oyedayo break-after-avoid"
);
tw!("h-full border-2 border-opacity-60 rounded-lg overflow-hidden");

如果使用了无效的类名，编译器将引发错误，防止它在您的应用程序中使用。

问题陈述

TailwindCSS为开发者提供了灵活的实用工具优先方法来设计Web应用程序。然而，其灵活性也可能导致一些潜在问题

• 运行时错误： 无效的TailwindCSS类名可能导致意外的样式问题，这些问题仅在运行时才会被发现。

• 开发者体验： 手动验证类名可能会很繁琐且容易出错。此外，依赖于运行时检查或外部工具可能会中断开发流程。

• 与插件的兼容性： 一些TailwindCSS实用工具通过插件（如daisyui）扩展其功能。传统方法可能无法无缝支持这些扩展，从而导致开发体验碎片化。

• 代码重用性： 直接从一个项目复制并重用TailwindCSS代码到另一个项目通常需要手动转换或映射，这降低了开发效率。

• 构建大小增加：无效的类名意外进入生产代码会导致最终CSS包的大小增加，影响性能。

解决方案

twust通过提供以下功能解决这些挑战：

• 编译时验证：twust通过在编译时检查TailwindCSS类名的有效性，防止无效的类名进入生产代码。

• 无缝集成：作为Rust宏，twust可以无缝集成到您的Rust工作流程中，提供即时反馈，无需外部工具或手动验证。

• 插件支持：使用twust，您可以通过仅指定它们作为功能来轻松集成流行的插件，如daisyui，确保一致且扩展的开发体验。

• 代码复用轻松：可以复制粘贴并重用TailwindCSS代码，无需任何手动映射或转换。只需用宏包裹您的代码即可。

• 优化构建：通过确保只使用有效的类名，twust有助于减少最终CSS包中的冗余。

特性

• 全面覆盖：支持所有标准TailwindCSS类名，包括响应式变体、伪类变体等。

• 自定义配置：可以轻松地将自定义TailwindCSS配置集成到自定义实用类中。

• 插件集成：通过指定它们作为功能启用对流行的插件如daisyui的支持，提供更广泛的类名范围。

• 代码复用简单：直接在项目中复制粘贴TailwindCSS代码，无需任何手动操作，确保快速开发。

• 性能：考虑到性能，确保在编译过程中的开销最小。

与其他Rust库的比较

tailwindcss-to-rust

tailwindcss-to-rust是一个CLI工具，它从编译后的TailwindCSS生成Rust代码。它允许开发人员从Rust引用Tailwind类，对不存在的类提供编译时错误检查，并为可用的类提供代码补全。

缺点

1. 复杂设置：tailwindcss-to-rust的设置过程需要几个步骤，包括

   • 安装多个工具。
   • 自定义tailwind.config.js以检查Rust文件。
   • 生成Rust代码并确保tailwindcss可执行文件在PATH中。
   • 修改正则表达式以匹配特定的模板系统。

   对于不熟悉TailwindCSS或Rust的开发人员来说，这种设置可能令人望而却步。

2. 生成代码维护：tailwindcss-to-rust根据TailwindCSS配置的当前状态生成代码。任何对配置或TailwindCSS本身的更改都可能需要重新生成Rust代码，这使得维护更具挑战性。

3. 自定义类分组：尽管该工具根据Tailwind文档对类进行分组，但自定义类最终会出现在“未知”组（C::unk）中。虽然有一个改进的计划，但尚未实施。

4. 修饰符有限：一些可参数化的修饰符，如aria-*和data-*不包括在内。根据项目不同，这可能是一个重大的限制。

5. 外部依赖：该工具需要tailwindcss CLI工具的存在，无论是通过npm还是作为独立的二进制文件。这添加了一个外部依赖项，可能不适合所有项目，特别是那些希望最小化依赖树的项目。

twust的方法

我们的解决方案通过twust提供了一个更流畅和集成的方法

• 简化设置：只需将宏添加到您的项目中，即可开始使用。无需外部工具或额外的配置步骤。

• 实时验证：与从 TailwindCSS 生成静态 Rust 代码不同，twust 在编译过程中实时验证类名。

• 无外部依赖： twust 是自包含的，这意味着您不需要像 tailwindcss CLI 这样的外部工具。

• 广泛覆盖：我们支持所有标准的 TailwindCSS 类名，包括响应式变体、伪类变体等。宏的灵活性使得支持更新的 TailwindCSS 特性变得更容易。

tailwind.config.json 概述

基本结构

{
  "corePlugins": {},
  "allowedLists": {
    "classes": [],
    "modifiers": []
  },
  "theme": {
    ...utilities...
    "extend": {
      ...extended utilities...
    }
  },
  "variants": {},
  "plugins": {}
}

关键部分

1. corePlugins：确定应包含在生成的 CSS 中的实用工具插件。每个键代表一个实用工具，其值（true/false）确定是否生成。

2. allowedLists:

   • classes：允许的类名数组。
   • modifiers：允许的修饰符数组，如 hover、focus 等。

3. theme：定义设计系统的默认值和自定义。

   在 theme 的主部分中，您可以对不同的实用工具进行配置，如 screens、colors、spacing 等。在 theme 内部的 extend 部分允许您向默认集合添加额外的值。

贡献

欢迎贡献力量！如果您有建议、错误报告或想为代码贡献力量，请打开一个问题或拉取请求。

许可

twust 在 MIT 许可下发布。有关详细信息，请参阅 LICENSE 文件。