TwMerge

https://github.com/zettersten/tailwindmerge
Admin
TwMerge is a high-performance .NET library for merging Tailwind CSS class names with conflict...
Tokens:8,336
Snippets:70
Trust Score:8
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install TwMerge Package

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Add the TwMerge package to your .NET project using the dotnet CLI.

```bash
dotnet add package TwMerge
```

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

### Performance-Optimized TwMerge Setup in C#

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Configure TwMerge for high-frequency merging by setting a large cache size, reducing the theme, and specifying only essential class groups. This setup is ideal for performance-critical applications.

```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);
```

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

### Plugin Integration for Typography

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Configure Tailwind Merge to support plugins like `@tailwindcss/typography`. This example sets up class groups and conflicts for prose styling and colors, merging with existing configurations.

```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"
```

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

### Framework-Specific Setup for React/Blazor

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Configure Tailwind Merge for component libraries in frameworks like React or Blazor. This includes setting a custom separator to avoid CSS-in-JS conflicts, increasing cache size, and defining modifier conflicts 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);
```

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

### Design System Integration with Tailwind Merge

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Configure Tailwind Merge for a company design system, including custom prefixes, themes, class groups, and conflicting class groups. This example demonstrates how custom colors conflict with default ones.

```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)
```

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

### Modifier-Aware Merging Examples

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

TwMerge treats modifier prefixes like `sm:`, `hover:`, `dark:`, and `!` as part of the conflict key. Classes only conflict if they share the same modifiers and belong to the same class group.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

// Same modifier + same group → conflict (last wins)
var r1 = twMerge.Merge("hover:w-3", "hover:w-4");
// => "hover:w-4"

// Different modifiers + same group → no conflict (both kept)
var r2 = twMerge.Merge("sm:w-2", "md:w-4");
// => "sm:w-2 md:w-4"

// Multiple responsive breakpoints
var r3 = twMerge.Merge("sm:text-xs", "md:text-lg", "sm:text-base", "md:text-xl");
// => "sm:text-base md:text-xl"

// Dark mode
var r4 = twMerge.Merge("dark:text-white", "dark:text-black");
// => "dark:text-black"

// Stacked modifiers
var r5 = twMerge.Merge("sm:hover:bg-red-500", "sm:hover:bg-blue-500");
// => "sm:hover:bg-blue-500"

// Important modifier
var r6 = twMerge.Merge("w-3", "!w-4");
// => "!w-4"
```

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

### Fluent Configuration with TwConfig Builder

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Shows how to use the `TwConfig` fluent builder to customize Tailwind Merge behavior, including extending default configurations.

```csharp
using TailwindMerge;

// Custom config: extend the default with plugin-specific groups
var config = TwConfig.Default()
    .CacheSize(1000)           // increase LRU cache (default: 500)
    .Separator("__")           // use __ instead of : for modifiers
    .Prefix("tw-")             // namespace all classes with tw- prefix
    .Theme(new Dictionary<string, object>
    {
        ["colors"] = new List<object> { "brand-primary", "brand-secondary" },
    }, extend: true)           // extend (not replace) default theme
    .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" }
            }
        }
    }, extend: true)           // add @tailwindcss/typography prose classes
    .ConflictingClassGroups(new Dictionary<string, List<string>>
    {
        ["prose"] = new List<string> { "prose-colors" }
    }, extend: true)
    .OrderSensitiveModifiers(new List<string> { "before", "after" }, extend: true);

var twMerge = new TwMerge(config);

var result = twMerge.Merge("tw-prose", "tw-prose-lg", "tw-prose-gray", "tw-prose-blue");
// => "tw-prose-lg tw-prose-blue"
```

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

### Applying a Prefix to Tailwind Classes with TwConfig.Prefix

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Demonstrates how to use `TwConfig.Prefix()` to namespace all Tailwind classes, aligning with Tailwind's `prefix` configuration option.

```csharp
using TailwindMerge;

var config = TwConfig.Default().Prefix("ui-");
var twMerge = new TwMerge(config);

var result = twMerge.Merge("ui-bg-blue-500 ui-text-white", "ui-bg-red-500");
// => "ui-text-white ui-bg-red-500"
```

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

### Tuning LRU Cache Size with TwConfig.CacheSize

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Illustrates how to control the capacity of the internal LRU merge-result cache using `TwConfig.CacheSize()` for performance tuning.

```csharp
using TailwindMerge;

// Memory-constrained environment
var lightConfig = new TwConfig().CacheSize(100);

// High-throughput server with many repeated component renders
var heavyConfig = TwConfig.Default().CacheSize(5000);

var twMerge = new TwMerge(heavyConfig);
```

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

### Configure Custom Theme

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Define custom theme values such as colors and spacing scales to be referenced by class groups, enabling integration with custom design systems.

```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);
```

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

### Create TwMerge Instance

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

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

```csharp
using TailwindMerge;

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

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

### Inject and use TwMerge in a Razor component

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Demonstrates injecting the `TwMerge` service into a Razor component and using it to merge class strings with conditional logic.

```csharp
// Inject into a Razor component, controller, or service
public class ButtonComponent(TwMerge twMerge)
{
    public string GetClasses(bool isPrimary, bool isDisabled) =>
        twMerge.Merge(
            "ds-btn ds-px-4 ds-py-2 ds-rounded ds-font-semibold",
            new Dictionary<string, bool>
            {
                ["ds-btn-primary ds-bg-blue-600 ds-text-white"] = isPrimary,
                ["ds-btn-secondary ds-bg-gray-200 ds-text-gray-800"] = !isPrimary,
                ["ds-opacity-50 ds-cursor-not-allowed"] = isDisabled,
            }
        );
}
```

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

### Arbitrary Value Support in Tailwind Merge

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Demonstrates how Tailwind Merge correctly classifies and resolves conflicts with arbitrary CSS values in square brackets.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

// Arbitrary length vs arbitrary length
var r1 = twMerge.Merge("w-[32px]", "w-[64px]");
// => "w-[64px]"

// Arbitrary font-size vs named font-size (both are text-size group)
var r2 = twMerge.Merge("text-lg", "text-[58px]");
// => "text-[58px]"

// Arbitrary font-size does NOT conflict with text color
var r3 = twMerge.Merge("text-[58px]", "text-white");
// => "text-[58px] text-white"

// Arbitrary leading with responsive modifier
var r4 = twMerge.Merge("md:leading-[1.2]", "md:leading-[1.5]");
// => "md:leading-[1.5]"

// Arbitrary CSS properties (mask-type, etc.)
var r5 = twMerge.Merge("[mask-type:luminance]", "[mask-type:alpha]");
// => "[mask-type:alpha]"

// With responsive modifier
var r6 = twMerge.Merge("sm:w-[32px]", "sm:w-[64px]", "md:h-[10px]", "md:h-[20px]");
// => "sm:w-[64px] md:h-[20px]"
```

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

### Merge Class Strings with TwMerge.Merge(params string[])

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts one or more class strings, resolves conflicts, removes duplicates, and returns a single deduplicated string. The last class in a conflicting group wins. Null or empty inputs are ignored.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

// Basic conflict resolution — last value wins per group
var result1 = twMerge.Merge("w-3", "w-4");
// => "w-4"

// Multiple groups — non-conflicting classes are preserved
var result2 = twMerge.Merge("mt-2", "mt-4", "mb-2");
// => "mt-4 mb-2"

// Duplicate removal
var result3 = twMerge.Merge("text-center", "text-center");
// => "text-center"

// Null / empty inputs are ignored
var result4 = twMerge.Merge("", null!, "p-4");
// => "p-4"

// Mixed utility groups in a single call
var result5 = twMerge.Merge("p-2", "m-2", "p-4", "text-lg", "text-sm");
// => "m-2 p-4 text-sm"
```

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

### Configure Class Name Prefix

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Add a prefix to all Tailwind class names for namespacing, which is helpful when integrating with existing CSS or for component library isolation.

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

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

### Configure Cache Size

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Customize the LRU cache size for memoizing merge results. Set to 0 to disable caching.

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

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

### Configure Custom Class Groups

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Define custom Tailwind class groups and their patterns, allowing for the inclusion of custom utility classes from plugins or company-specific design tokens.

```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);
```

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

### Zero-Allocation Merge with TwMerge.Merge(ReadOnlySpan<string>)

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts a ReadOnlySpan<string> for hot-path scenarios where avoiding heap allocations is critical. This method provides efficient merging for performance-sensitive applications.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

ReadOnlySpan<string> classes = ["bg-blue-500", "bg-red-500", "text-white"];
var result = twMerge.Merge(classes);
// => "text-white bg-red-500"
```

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

### Register TwMerge with ASP.NET Core DI

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Registers `TwMerge` as a singleton in the ASP.NET Core dependency injection container. An optional delegate can configure `TwConfig` at registration time.

```csharp
using Microsoft.Extensions.DependencyInjection;
using TailwindMerge;

// Program.cs / Startup.cs

// Register with default Tailwind v4 config
builder.Services.AddTwMerge();

// Register with custom config
builder.Services.AddTwMerge(config =>
{
    config
        .CacheSize(2000)
        .Prefix("ds-")
        .ClassGroups(new Dictionary<string, List<object>> 
        {
            ["brand-btn"] = new List<object> { "btn", "btn-primary", "btn-secondary" }
        }, extend: true)
        .ConflictingClassGroups(new Dictionary<string, List<string>> 
        {
            ["brand-btn"] = new List<string> { "display" }
        }, extend: true);
});
```

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

### Conditional Merging with TwMerge.Merge(params object[])

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts mixed inputs including plain strings, dictionaries for conditional classes, and anonymous objects. Only keys with truthy values are included in the merged output.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

bool isError = true;
bool isDisabled = false;

// Dictionary<string, bool> — conditional classes
var result1 = twMerge.Merge(
    "btn px-4 py-2",
    new Dictionary<string, bool>
    {
        ["bg-red-500"]   = isError,
        ["bg-gray-200"]  = isDisabled,
        ["opacity-50"]   = isDisabled,
        ["text-white"]   = isError,
    }
);
// => "btn px-4 py-2 bg-red-500 text-white"

// Anonymous object — truthy property values
var result2 = twMerge.Merge(
    "rounded border",
    new { border_2 = true, rounded_lg = true, border = false }
);
// => "rounded-lg border-2"  (truthy properties are included as class names)
```

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

### `TwMerge.Merge(params string[])` — Merge class strings

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts one or more class strings, resolves conflicts within each class group, removes duplicates, and returns a single deduplicated string. The last class in a conflicting group always wins.

```APIDOC
## `TwMerge.Merge(params string[])`

### Description
Merges multiple class strings, resolving conflicts and removing duplicates. The last class in a conflicting group takes precedence.

### Method
`TwMerge.Merge`

### Parameters
* `params string[]` - One or more strings, where each string can contain space-separated class names.

### Request Example
```csharp
using TailwindMerge;

var twMerge = new TwMerge();

// Basic conflict resolution — last value wins per group
var result1 = twMerge.Merge("w-3", "w-4");
// => "w-4"

// Multiple groups — non-conflicting classes are preserved
var result2 = twMerge.Merge("mt-2", "mt-4", "mb-2");
// => "mt-4 mb-2"

// Duplicate removal
var result3 = twMerge.Merge("text-center", "text-center");
// => "text-center"

// Null / empty inputs are ignored
var result4 = twMerge.Merge("", null!, "p-4");
// => "p-4"

// Mixed utility groups in a single call
var result5 = twMerge.Merge("p-2", "m-2", "p-4", "text-lg", "text-sm");
// => "m-2 p-4 text-sm"
```
```

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

### Merge Class Collections with TwMerge.Merge(IEnumerable<string>)

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts any IEnumerable<string>, useful when class lists are built programmatically. This method merges classes from a collection, resolving conflicts and duplicates.

```csharp
using TailwindMerge;

var twMerge = new TwMerge();

IEnumerable<string> baseClasses = ["flex", "items-center", "gap-4"];
IEnumerable<string> overrides = ["flex-col", "items-end"];

var merged = twMerge.Merge(baseClasses.Concat(overrides));
// => "gap-4 flex-col items-end"
```

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

### AddTwMerge — ASP.NET Core / DI registration

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Extension method for `IServiceCollection` that registers `TwMerge` as a singleton. An optional delegate overload configures `TwConfig` at registration time.

```APIDOC
## `AddTwMerge` — ASP.NET Core / DI registration

Extension method for `IServiceCollection` that registers `TwMerge` as a singleton. An optional delegate overload configures `TwConfig` at registration time.

```csharp
using Microsoft.Extensions.DependencyInjection;
using TailwindMerge;

// Program.cs / Startup.cs

// Register with default Tailwind v4 config
builder.Services.AddTwMerge();

// Register with custom config
builder.Services.AddTwMerge(config =>
{
    config
        .CacheSize(2000)
        .Prefix("ds-")
        .ClassGroups(new Dictionary<string, List<object>>
        {
            ["brand-btn"] = new List<object> { "btn", "btn-primary", "btn-secondary" }
        }, extend: true)
        .ConflictingClassGroups(new Dictionary<string, List<string>>
        {
            ["brand-btn"] = new List<string> { "display" }
        }, extend: true);
});

// Inject into a Razor component, controller, or service
public class ButtonComponent(TwMerge twMerge)
{
    public string GetClasses(bool isPrimary, bool isDisabled) =>
        twMerge.Merge(
            "ds-btn ds-px-4 ds-py-2 ds-rounded ds-font-semibold",
            new Dictionary<string, bool>
            {
                ["ds-btn-primary ds-bg-blue-600 ds-text-white"] = isPrimary,
                ["ds-btn-secondary ds-bg-gray-200 ds-text-gray-800"] = !isPrimary,
                ["ds-opacity-50 ds-cursor-not-allowed"] = isDisabled,
            }
        );
}
```
```

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

### Configure Custom Separator

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Define a custom separator character for modifiers and base classes, useful when avoiding conflicts with other libraries or 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 Groups

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Customize which class groups conflict with each other. Useful for design systems or preventing specific class combinations. Set `extend: true` to merge with existing conflicts.

```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);
```

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

### `TwMerge.Merge(IEnumerable<string>)` — Merge from a collection

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts any `IEnumerable<string>`, which is useful when class lists are built programmatically. It merges the classes, resolving conflicts and removing duplicates.

```APIDOC
## `TwMerge.Merge(IEnumerable<string>)`

### Description
Merges class names from an `IEnumerable<string>`, suitable for programmatically generated lists. Conflicts are resolved, and duplicates are removed.

### Method
`TwMerge.Merge`

### Parameters
* `IEnumerable<string>` - A collection of class name strings.

### Request Example
```csharp
using TailwindMerge;
using System.Linq;

var twMerge = new TwMerge();

IEnumerable<string> baseClasses = ["flex", "items-center", "gap-4"];
IEnumerable<string> overrides = ["flex-col", "items-end"];

var merged = twMerge.Merge(baseClasses.Concat(overrides));
// => "gap-4 flex-col items-end"
```
```

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

### `TwMerge.Merge(ReadOnlySpan<string>)` — Zero-allocation span merge

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts a `ReadOnlySpan<string>` for performance-critical scenarios where avoiding heap allocations is essential. It merges the class names efficiently.

```APIDOC
## `TwMerge.Merge(ReadOnlySpan<string>)`

### Description
Performs a zero-allocation merge of class names using a `ReadOnlySpan<string>`, optimized for high-performance scenarios.

### Method
`TwMerge.Merge`

### Parameters
* `ReadOnlySpan<string>` - A span of class name strings.

### Request Example
```csharp
using TailwindMerge;

var twMerge = new TwMerge();

ReadOnlySpan<string> classes = ["bg-blue-500", "bg-red-500", "text-white"];
var result = twMerge.Merge(classes);
// => "text-white bg-red-500"
```
```

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

### `TwMerge.Merge(params object[])` — Conditional / dictionary merge

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Accepts mixed inputs including plain strings, dictionaries for conditional classes, and anonymous objects. Only keys/properties with truthy values are included in the merged output.

```APIDOC
## `TwMerge.Merge(params object[])`

### Description
Merges class names from a mix of types: strings, dictionaries for conditional classes (`IDictionary<string, bool>`), and anonymous objects. Only truthy values result in included class names.

### Method
`TwMerge.Merge`

### Parameters
* `params object[]` - A variable number of arguments, which can include strings, dictionaries, or anonymous objects.

### Request Example
```csharp
using TailwindMerge;

var twMerge = new TwMerge();

bool isError = true;
bool isDisabled = false;

// Dictionary<string, bool> — conditional classes
var result1 = twMerge.Merge(
    "btn px-4 py-2",
    new Dictionary<string, bool>
    {
        ["bg-red-500"]   = isError,
        ["bg-gray-200"]  = isDisabled,
        ["opacity-50"]   = isDisabled,
        ["text-white"]   = isError,
    }
);
// => "btn px-4 py-2 bg-red-500 text-white"

// Anonymous object — truthy property values
var result2 = twMerge.Merge(
    "rounded border",
    new { border_2 = true, rounded_lg = true, border = false }
);
// => "rounded-lg border-2"  (truthy properties are included as class names)
```
```

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

### Inspect Tailwind CSS class groups with ClassInspector

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

Uses `ClassInspector` to examine the internal logic of `TwMerge`, such as resolving class group IDs and splitting class strings with modifiers. This is useful for debugging custom configurations.

```csharp
using TailwindMerge;
using TailwindMerge.Utilities;

var inspector = new ClassInspector(TwConfig.Default());

// Resolve the group ID for a class name
Console.WriteLine(inspector.GetClassGroupId("text-lg"));        // "text-size"
Console.WriteLine(inspector.GetClassGroupId("text-red-500"));   // "text-color"
Console.WriteLine(inspector.GetClassGroupId("text-[58px]"));    // "text-size"
Console.WriteLine(inspector.GetClassGroupId("w-4"));            // "w"
Console.WriteLine(inspector.GetClassGroupId("opacity-50"));     // "opacity"
```

```csharp
// Split a class string into its modifiers and base class
var ctx = inspector.SplitModifiers("sm:hover:bg-blue-500");
Console.WriteLine(string.Join(", ", ctx.Modifiers));   // "sm, hover"
Console.WriteLine(ctx.BaseClassName);                   // "bg-blue-500"
Console.WriteLine(ctx.HasImportantModifier);            // False

var impCtx = inspector.SplitModifiers("!text-lg");
Console.WriteLine(impCtx.HasImportantModifier);         // True
Console.WriteLine(impCtx.BaseClassName);                // "text-lg"
```

```csharp
// Retrieve all class groups that conflict with a given group
var conflicts = inspector.GetConflictingClassGroupIds("p", hasPostfixModifier: false);
// => ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"]
```

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

### Merge Tailwind Class Names

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Use the TwMerge instance to merge multiple Tailwind CSS class name strings. Conflicting and duplicate classes are automatically resolved.

```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");
```

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

### Modifier-aware merging

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

TwMerge correctly handles modifier prefixes like `sm:`, `hover:`, `dark:`, and `!` by treating them as part of the conflict key. Classes only conflict if they share the same modifiers and belong to the same group.

```APIDOC
## Modifier-aware merging

### Description
TwMerge intelligently merges class names with modifiers (e.g., responsive prefixes, state variants, dark mode, important modifier). Conflicts are only resolved when both the modifier and the class group match; otherwise, classes are preserved.

### Examples

* **Same modifier + same group → conflict (last wins)**
```csharp
var r1 = twMerge.Merge("hover:w-3", "hover:w-4");
// => "hover:w-4"
```

* **Different modifiers + same group → no conflict (both kept)**
```csharp
var r2 = twMerge.Merge("sm:w-2", "md:w-4");
// => "sm:w-2 md:w-4"
```

* **Multiple responsive breakpoints**
```csharp
var r3 = twMerge.Merge("sm:text-xs", "md:text-lg", "sm:text-base", "md:text-xl");
// => "sm:text-base md:text-xl"
```

* **Dark mode**
```csharp
var r4 = twMerge.Merge("dark:text-white", "dark:text-black");
// => "dark:text-black"
```

* **Stacked modifiers**
```csharp
var r5 = twMerge.Merge("sm:hover:bg-red-500", "sm:hover:bg-blue-500");
// => "sm:hover:bg-blue-500"
```

* **Important modifier**
```csharp
var r6 = twMerge.Merge("w-3", "!w-4");
// => "!w-4"
```
```

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

### Define Conflicting Class Group Modifiers

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Specify additional conflicts that occur when classes have postfix modifiers. Useful for advanced typography or spacing utilities. This configuration does not extend existing modifier conflicts by default.

```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);
```

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

### ClassInspector — Low-level class group inspection (internal/test utility)

Source: https://context7.com/zettersten/tailwindmerge/llms.txt

`ClassInspector` exposes the underlying group-resolution and modifier-splitting logic. It is `internal` but exposed to the test project via `InternalsVisibleTo`. Useful for debugging custom configurations.

```APIDOC
## `ClassInspector` — Low-level class group inspection (internal/test utility)

`ClassInspector` exposes the underlying group-resolution and modifier-splitting logic. It is `internal` but exposed to the test project via `InternalsVisibleTo`. Useful for debugging custom configurations.

```csharp
using TailwindMerge;
using TailwindMerge.Utilities;

var inspector = new ClassInspector(TwConfig.Default());

// Resolve the group ID for a class name
Console.WriteLine(inspector.GetClassGroupId("text-lg"));        // "text-size"
Console.WriteLine(inspector.GetClassGroupId("text-red-500"));   // "text-color"
Console.WriteLine(inspector.GetClassGroupId("text-[58px]"));    // "text-size"
Console.WriteLine(inspector.GetClassGroupId("w-4"));            // "w"
Console.WriteLine(inspector.GetClassGroupId("opacity-50"));     // "opacity"

// Split a class string into its modifiers and base class
var ctx = inspector.SplitModifiers("sm:hover:bg-blue-500");
Console.WriteLine(string.Join(", ", ctx.Modifiers));   // "sm, hover"
Console.WriteLine(ctx.BaseClassName);                   // "bg-blue-500"
Console.WriteLine(ctx.HasImportantModifier);            // False

var impCtx = inspector.SplitModifiers("!text-lg");
Console.WriteLine(impCtx.HasImportantModifier);         // True
Console.WriteLine(impCtx.BaseClassName);                // "text-lg"

// Retrieve all class groups that conflict with a given group
var conflicts = inspector.GetConflictingClassGroupIds("p", hasPostfixModifier: false);
// => ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"]
```
```

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

### Specify Order Sensitive Modifiers

Source: https://github.com/zettersten/tailwindmerge/blob/main/README.md

Define modifiers where the order matters for CSS specificity, such as pseudo-elements or state modifiers. This is crucial 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