尾风融合

该库包含两个主要工具

1. Fuse：组合多个 Tailwind 类，可选冲突解决。

   受 Tailwind Merge 启发

2. 变体：组合类型安全的变体类

   受 Class Variance Authority 启发

安装

变体需要启用 variant 功能。

启用变体

cargo add tailwind-fuse --features variant

未启用变体

cargo add tailwind-fuse

使用：Fuse

您可以使用 tw_join! 来连接 Tailwind 类，以及 tw_merge! 来合并 Tailwind 类并处理冲突。

您可以使用实现了 AsTailwindClass 的任何内容

use tailwind_fuse::*;

// No conflict resolution
assert_eq!(
   "flex items-center justify-center",
   tw_join!("flex", "items-center", "justify-center")
);

// Conflict resolution
// Right most class takes precedence
assert_eq!(
   "p-4",
   tw_merge!("py-2 px-4", "p-4")
);

// Refinements are permitted
assert_eq!(
   "p-4 py-2",
   tw_merge!("p-4", "py-2")
);

您可以使用选项来排除某些类合并

use tailwind_fuse::*;

assert_eq!(
  "flex justify-center",
  tw_join!("flex", (false).then_some("items-center"), (true).then_some("justify-center"))
)

自定义 Tailwind 前缀/分隔符

使用 merge::set_merge_options 来设置 tw_merge! 和变体宏的全局选项。

这只能设置一次。后续调用将被忽略。

use tailwind_fuse::{*, merge::*};

const OPTIONS: MergeOptions = MergeOptions {
    prefix: "tw-",
    separator: ":",
};

// Before setting options, the default (no prefix) is used
assert_eq!(
  "tw-bg-black tw-bg-white",
  tw_merge!("tw-bg-black", "tw-bg-white"),
);

set_merge_options(OPTIONS);

assert_eq!(
  "tw-bg-white",
  tw_merge!("tw-bg-black", "tw-bg-white"),
);

使用：变体

对于构建具有一等 Tailwind 支持的组件非常有用。默认情况下，冲突使用 [tw_merge()] 合并。

每个 TwClass 代表一个具有可定制属性的 UI 元素（属性是“变体”）。每个变体由一个 TwVariant 表示，它必须是一个具有默认情况的枚举。

类按照以下顺序合并，最后一个类具有优先权

1. TwClass 的基本类
2. TwVariant 的基本类
3. TwVariant 的枚举变体类
4. 使用在结构体或构建器上的 IntoTailwindClass::with_class 覆盖类

use tailwind_fuse::*;

// Your Component Type
#[derive(TwClass)]
// Optional base class
#[tw(class = "flex")]
struct Btn {
    size: BtnSize,
    color: BtnColor,
}

// Variant for size
#[derive(TwVariant)]
enum BtnSize {
    #[tw(default, class = "h-9 px-4 py-2")]
    Default,
    #[tw(class = "h-8 px-3")]
    Sm,
    #[tw(class = "h-10 px-8")]
    Lg,
}

// Variant for color
#[derive(TwVariant)]
enum BtnColor {
    #[tw(default, class = "bg-blue-500 text-blue-100")]
    Blue,
    #[tw(class = "bg-red-500 text-red-100")]
    Red,
}

现在您可以使用 Btn 结构体生成 Tailwind 类，使用构建器语法或直接使用结构体

结构体语法

let button = Btn {
    size: BtnSize::Default,
    color: BtnColor::Blue,
};

assert_eq!(
   "flex h-9 px-4 py-2 bg-blue-500 text-blue-100",
   button.to_class()
);

// Conflicts are resolved (bg-blue-500 is knocked out in favor of override)
assert_eq!(
   "flex h-9 px-4 py-2 text-blue-100 bg-green-500",
   button.with_class("bg-green-500")
);

构建器语法

您可以使用 variants 方法访问构建器。每个未提供的变体都将替换为默认变体。

assert_eq!(
   "flex h-8 px-3 bg-red-500 text-red-100",
   Btn::builder()
      .size(BtnSize::Sm)
      .color(BtnColor::Red)
      .to_class()
);

assert_eq!(
   "flex h-8 px-3 text-red-100 bg-green-500",
   Btn::builder()
      .size(BtnSize::Sm)
      .color(BtnColor::Red)
      .with_class("bg-green-500")
);

VSCode Intellisense

您可以通过以下步骤启用 #[tw()] 内的自动完成

1. 安装 "Tailwind CSS IntelliSense" Visual Studio Code 扩展

2. 将以下内容添加到您的 settings.json

{
  "tailwindCSS.experimental.classRegex": [
    ["#[tw\\\\([^\\]]*class\\s*=\\s*\"([^\"]*)\"\\)]", "\"([^\"]*)\""]
  ]
}