Tailwind Fuse
Two main utils are included in this crate:
- Fuse: Fuse multiple Tailwind classes, with optional conflict resolution.
Inspired by Tailwind Merge
- Variants: Compose type-safe variant classes
Inspired by Class Variance Authority
Installation
Variants requires the variant
feature to be enabled.
With variant
Without variant
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 *;
// No conflict resolution
assert_eq!;
// Conflict resolution
// Right most class takes precedence
assert_eq!;
// Refinements are permitted
assert_eq!;
You can use Options to exclude certain classes from being merged
use *;
assert_eq!
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 ;
const OPTIONS: MergeOptions = MergeOptions ;
// Before setting options, the default (no prefix) is used
assert_eq!;
set_merge_options;
assert_eq!;
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:
- Base class from [
TwClass
] - Base class from [
TwVariant
] - Enum variant class from [
TwVariant
] - Override class using [
IntoTailwindClass::with_class
] on the struct or builder
use *;
// Your Component Type
// Optional base class
// Variant for size
// Variant for color
You can now use the Btn
struct to generate Tailwind classes, using builder syntax, or using the struct directly
Struct Syntax
let button = Btn ;
assert_eq!;
// Conflicts are resolved (bg-blue-500 is knocked out in favor of override)
assert_eq!;
Builder Syntax
You access the builder using the variants
method. Every variant that is not provided will be replaced with the default variant.
assert_eq!;
assert_eq!;
VSCode Intellisense
You can enable autocompletion inside #[tw()]
using the steps below:
-
Install the "Tailwind CSS IntelliSense" Visual Studio Code extension
-
Add the following to your
settings.json
: