4 releases (2 breaking)

0.3.0 Apr 12, 2024
0.2.0 Apr 2, 2024
0.1.1 Mar 30, 2024
0.1.0 Mar 7, 2024

#1378 in Procedural macros

Download history 148/week @ 2024-03-04 14/week @ 2024-03-11 42/week @ 2024-03-18 213/week @ 2024-03-25 199/week @ 2024-04-01 130/week @ 2024-04-08 12/week @ 2024-04-15 5/week @ 2024-04-22 50/week @ 2024-05-06 89/week @ 2024-05-13 92/week @ 2024-05-27 12/week @ 2024-06-03 25/week @ 2024-06-10

130 downloads per month
Used in 2 crates (via tailwind_fuse)

MIT license

281 lines

Tailwind Fuse

github crates.io docs.rs build status

Two main utils are included in this crate:

  1. Fuse: Fuse multiple Tailwind classes, with optional conflict resolution.

    Inspired by Tailwind Merge

  2. Variants: Compose type-safe variant classes

    Inspired by Class Variance Authority


Variants requires the variant feature to be enabled.

With variant

cargo add tailwind-fuse --features variant

Without variant

cargo add tailwind-fuse

Usage: Fuse

You can use tw_join! to join Tailwind classes, and tw_merge! to merge Tailwind Classes handling conflicts.

You can use anything that implements AsTailwindClass

use tailwind_fuse::*;

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

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

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

You can use Options to exclude certain classes from being merged

use tailwind_fuse::*;

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

Custom Tailwind Prefix/Separator

Use merge::set_merge_options to set global options for tw_merge! and variant macros.

This can only be set once. Subsequent calls will be ignored.

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

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

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


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

Usage: Variants

Useful for building components with first class support for tailwind. By default, conflicts are merged using [tw_merge()].

Each TwClass represents a UI element with customizable properties (property is a "variant"). Each variant is represented by a TwVariant, which must be an enum with a default case.

The classes are merged in the following order, with the last class takes precedence:

  1. Base class from TwClass
  2. Base class from TwVariant
  3. Enum variant class from TwVariant
  4. Override class using IntoTailwindClass::with_class on the struct or builder
use tailwind_fuse::*;

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

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

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

You can now use the Btn struct to generate Tailwind classes, using builder syntax, or using the struct directly

Struct Syntax

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

   "flex h-9 px-4 py-2 bg-blue-500 text-blue-100",

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

Builder Syntax

You access the builder using the variants method. Every variant that is not provided will be replaced with the default variant.

   "flex h-8 px-3 bg-red-500 text-red-100",

   "flex h-8 px-3 text-red-100 bg-green-500",

VSCode Intellisense

You can enable autocompletion inside #[tw()] using the steps below:

  1. Install the "Tailwind CSS IntelliSense" Visual Studio Code extension

  2. Add the following to your settings.json:

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


~25K SLoC