TwMerge

https://www.nuget.org/packages/TwMerge
Admin
TwMerge is a high-performance .NET library for merging Tailwind CSS class names with full conflict...
Tokens:3,801
Snippets:57
Trust Score:9.5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install TwMerge as a Cake Tool

Source: https://www.nuget.org/packages/TwMerge

Use this directive to install TwMerge as a tool within a Cake build script.

```powershell
#tool nuget:?package=TwMerge&version=1.0.7
```

--------------------------------

### Performance-Optimized TwMerge Setup

Source: https://www.nuget.org/packages/TwMerge

Configure TwMerge for high-frequency merging scenarios by increasing the cache size and reducing the theme and class groups to only essential ones for faster lookups.

```csharp
// For high-frequency merging scenarios
var performanceConfig = new TwConfig()
    .CacheSize(5000)  // Large cache
    .Theme(minimalTheme)  // Reduced theme for faster lookups
    .ClassGroups(essentialClassGroups);  // Only required class groups

var fastTwMerge = new TwMerge(performanceConfig);


```

--------------------------------

### Install TwMerge using Package Manager Console

Source: https://www.nuget.org/packages/TwMerge

This command is intended for use within the Package Manager Console in Visual Studio.

```powershell
NuGet\Install-Package TwMerge -Version 1.0.7
```

--------------------------------

### Install TwMerge as a Cake Addin

Source: https://www.nuget.org/packages/TwMerge

Use this directive to install TwMerge as an addin within a Cake build script.

```powershell
#addin nuget:?package=TwMerge&version=1.0.7
```

--------------------------------

### Integrate Custom Design System with TwMerge

Source: https://www.nuget.org/packages/TwMerge

Configure TwMerge to support a company's design system with custom tokens, themes, and class groups. This example demonstrates setting up custom colors and spacing, and defining conflicting class groups for background and text colors.

```csharp
// For a company design system with custom tokens
var designSystemConfig = new TwConfig()
    .Prefix("ds-")
    .Theme(new Dictionary<string, object>
    {
        ["colors"] = new List<object> 
        { 
            "brand-primary", "brand-secondary", "accent-blue", "accent-green" 
        },
        ["spacing"] = new List<object> 
        { 
            "micro", "tiny", "small", "medium", "large", "xlarge", "huge" 
        }
    })
    .ClassGroups(new Dictionary<string, List<object>>
    {
        ["brand-colors"] = new List<object>
        {
            new Dictionary<string, List<object>>
            {
                ["bg"] = new List<object> { "brand-primary", "brand-secondary" },
                ["text"] = new List<object> { "brand-primary", "brand-secondary" }
            }
        }
    }, extend: true)
    .ConflictingClassGroups(new Dictionary<string, List<string>>
    {
        ["brand-colors"] = new List<string> { "bg-color", "text-color" }
    }, extend: true);

var dstwMerge = new TwMerge(designSystemConfig);
var result = dstwMerge.Merge("ds-bg-brand-primary", "ds-bg-accent-blue");
// Result: "ds-bg-accent-blue" (brand colors conflict with regular colors)

```

--------------------------------

### Integrate Tailwind Plugins with TwMerge

Source: https://www.nuget.org/packages/TwMerge

Configure TwMerge to support Tailwind plugins, such as @tailwindcss/typography. This example sets up class groups for prose styles and prose colors, and defines conflicts between them.

```csharp
// Supporting Tailwind plugins like @tailwindcss/typography
var typographyConfig = new TwConfig()
    .ClassGroups(new Dictionary<string, List<object>>
    {
        ["prose"] = new List<object>
        {
            "prose",
            new Dictionary<string, List<object>>
            {
                ["prose"] = new List<object> { "sm", "base", "lg", "xl", "2xl" }
            }
        },
        ["prose-colors"] = new List<object>
        {
            new Dictionary<string, List<object>>
            {
                ["prose"] = new List<object> 
                { 
                    "gray", "red", "yellow", "green", "blue", "indigo", "purple", "pink" 
                }
            }
        }
    }, extend: true)
    .ConflictingClassGroups(new Dictionary<string, List<string>>
    {
        ["prose"] = new List<string> { "prose-colors" }
    }, extend: true);

var proseTwMerge = new TwMerge(typographyConfig);
var result = proseTwMerge.Merge("prose", "prose-lg", "prose-gray", "prose-blue");
// Result: "prose-lg prose-blue"

```

--------------------------------

### Reference TwMerge in C# file-based apps

Source: https://www.nuget.org/packages/TwMerge

The #:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

```csharp
#:package TwMerge@1.0.7
```

--------------------------------

### Framework-Specific TwMerge Setup for Components

Source: https://www.nuget.org/packages/TwMerge

Configure TwMerge for React/Blazor component libraries, using a custom separator to avoid CSS-in-JS conflicts and setting a higher cache size for component reuse. It also defines conflicting class group modifiers and order-sensitive modifiers.

```csharp
// For React/Blazor component libraries
var componentConfig = new TwConfig()
    .Separator("__")  // Avoid conflicts with CSS-in-JS
    .CacheSize(2000)  // Higher cache for component reuse
    .ConflictingClassGroupModifiers(new Dictionary<string, List<string>>
    {
        ["component-size"] = new List<string> { "padding", "margin", "gap" }
    })
    .OrderSensitiveModifiers(new List<string> 
    { 
        "before", "after", "hover", "focus", "active", "group-hover" 
    });

var componentTwMerge = new TwMerge(componentConfig);


```

--------------------------------

### Version TwMerge using Central Package Management (CPM)

Source: https://www.nuget.org/packages/TwMerge

For projects supporting CPM, copy this XML node into the solution Directory.Packages.props file to version the package.

```xml
<PackageVersion Include="TwMerge" Version="1.0.7" />
```

--------------------------------

### Create TwMerge instance

Source: https://www.nuget.org/packages/TwMerge

Instantiate the TwMerge class with default configuration to begin merging Tailwind class names.

```csharp
using TailwindMerge;
 
// Create instance with default config
var twMerge = new TwMerge(); 

```

--------------------------------

### Add TwMerge using Paket CLI

Source: https://www.nuget.org/packages/TwMerge

Use this command to add the TwMerge package to your project via the Paket CLI.

```bash
paket add TwMerge --version 1.0.7
```

--------------------------------

### Add TwMerge using .NET CLI (latest)

Source: https://www.nuget.org/packages/TwMerge

Use this command to add the TwMerge package to your project via the .NET CLI without specifying a version.

```bash
dotnet add package TwMerge
```

--------------------------------

### Add TwMerge using .NET CLI

Source: https://www.nuget.org/packages/TwMerge

Use this command to add the TwMerge package to your project via the .NET CLI.

```bash
dotnet add package TwMerge --version 1.0.7
```

--------------------------------

### Reference TwMerge in Project File (CPM)

Source: https://www.nuget.org/packages/TwMerge

For projects supporting Central Package Management (CPM), copy this XML node into the project file to reference the package.

```xml
<PackageReference Include="TwMerge" />
```

--------------------------------

### Define Custom Class Groups in TwConfig

Source: https://www.nuget.org/packages/TwMerge

Add custom utility classes or support company-specific design tokens by defining new class groups and their patterns. Use `extend: true` to merge with defaults.

```csharp
var customClassGroups = new Dictionary<string, List<object>>
{
    ["custom-size"] = new List<object>
    {
        new Dictionary<string, List<object>> 
        {
            ["size"] = new List<object> { "tiny", "huge", "massive" }
        }
    }
};
var config = new TwConfig().ClassGroups(customClassGroups, extend: true);

```

--------------------------------

### Configure Cache Size for TwConfig

Source: https://www.nuget.org/packages/TwMerge

Increase cache size for applications with many repeated class combinations to improve performance. Set to 0 to disable caching.

```csharp
var config = new TwConfig().CacheSize(1000); // Increase cache for better performance

```

--------------------------------

### Define Custom Theme Values in TwConfig

Source: https://www.nuget.org/packages/TwMerge

Extend Tailwind's default theme with custom values for colors, spacing, etc., for design system integration or custom palettes.

```csharp
var customTheme = new Dictionary<string, object>
{
    ["colors"] = new List<object> { /* custom color definitions */ },
    ["spacing"] = new List<object> { /* custom spacing values */ }
};
var config = new TwConfig().Theme(customTheme);

```

--------------------------------

### Reference TwMerge using PackageReference

Source: https://www.nuget.org/packages/TwMerge

For projects supporting PackageReference, copy this XML node into your project file to reference the package.

```xml
<PackageReference Include="TwMerge" Version="1.0.7" />
```

--------------------------------

### Reference TwMerge in F# Interactive or Polyglot Notebooks

Source: https://www.nuget.org/packages/TwMerge

The #r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

```fsharp
#r "nuget: TwMerge, 1.0.7"
```

--------------------------------

### Define Conflicting Class Groups in TwConfig

Source: https://www.nuget.org/packages/TwMerge

Specify which class groups conflict with each other to enforce design system rules or prevent certain class combinations. Use `extend: true` to merge with defaults.

```csharp
var customConflicts = new Dictionary<string, List<string>>
{
    ["custom-margin"] = new List<string> { "margin", "margin-x", "margin-y" },
    ["custom-layout"] = new List<string> { "display", "position" }
};
var config = new TwConfig().ConflictingClassGroups(customConflicts, extend: true);

```

--------------------------------

### Add Prefix to Tailwind Classes with TwConfig

Source: https://www.nuget.org/packages/TwMerge

Adds a prefix to all Tailwind class names for namespacing, preventing conflicts with existing CSS frameworks or for component library isolation.

```csharp
var config = new TwConfig().Prefix("tw-");
// Supports: "tw-bg-blue-500", "tw-hover:bg-red-500"

```

--------------------------------

### Set Custom Separator in TwConfig

Source: https://www.nuget.org/packages/TwMerge

Define custom characters to separate modifiers from base classes. Useful when avoiding conflicts with other libraries or using custom Tailwind configurations.

```csharp
var config = new TwConfig().Separator("__"); // Custom separator
// Now supports: "hover__bg-blue-500" instead of "hover:bg-blue-500"

```

--------------------------------

### Define Conflicting Class Group Modifiers in TwConfig

Source: https://www.nuget.org/packages/TwMerge

Define additional conflicts that occur when classes have postfix modifiers, useful for advanced typography or spacing utilities.

```csharp
var modifierConflicts = new Dictionary<string, List<string>>
{
    ["font-size"] = new List<string> { "leading", "line-height" },
    ["custom-text"] = new List<string> { "tracking", "letter-spacing" }
};
var config = new TwConfig().ConflictingClassGroupModifiers(modifierConflicts);

```

--------------------------------

### Merge Tailwind class names

Source: https://www.nuget.org/packages/TwMerge

Use the Merge method on a TwMerge instance to combine and deduplicate Tailwind CSS class names, resolving conflicts.

```csharp
// merged == "w-4 hover:w-4 text-blue-500"
var merged = twMerge.Merge("w-3", "w-4", "hover:w-3", "hover:w-4", "text-red-500", "text-blue-500"); 

```

--------------------------------

### Specify Order Sensitive Modifiers in TwConfig

Source: https://www.nuget.org/packages/TwMerge

List modifiers where order matters for CSS specificity, such as pseudo-elements. Useful for CSS-in-JS integration or advanced styling patterns.

```csharp
var orderSensitive = new List<string> 
{
    "before", "after", "first-letter", "first-line", 
    "custom-pseudo", "custom-element" 
};
var config = new TwConfig().OrderSensitiveModifiers(orderSensitive);

```
Tokens:
Raw