### Minimal Complete TailwindBlazor Example in Program.cs

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This is a minimal, complete example of a 'Program.cs' file for a Blazor application using TailwindBlazor. It includes service registration, component setup, and application startup.

```csharp
// Program.cs
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);
builder.UseTailwind();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();
```

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

### Complete Blazor Server Application Example with TailwindBlazor Integration (C#)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

A minimal setup for a Blazor Server application demonstrating the integration of TailwindBlazor. This example shows the necessary steps in Program.cs to register TailwindBlazor and configure the application services.

```csharp
// Program.cs
using SampleBlazorApp.Components;
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);

// Register TailwindBlazor - this is all you need!
builder.UseTailwind();

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
}

app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();
```

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

### Install TailwindBlazor Package

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This command adds the TailwindBlazor NuGet package to your Blazor project. It's the first step in integrating Tailwind CSS.

```bash
dotnet add package TailwindBlazor
```

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

### Blazor Server with Interactive Components and Tailwind

Source: https://github.com/luissena/tailwindblazor/blob/main/README.md

Sets up a Blazor Server application with interactive server components and integrates Tailwind CSS. This example shows the necessary service registrations and endpoint mappings.

```csharp
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);
builder.UseTailwind();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();
```

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

### CSS Entry Point Setup with Tailwind CSS v4

Source: https://context7.com/luissena/tailwindblazor/llms.txt

Sets up the CSS entry point file, typically `Styles/app.css`, to import Tailwind CSS v4. Tailwind v4 automatically detects content files, eliminating the need for a separate configuration file.

```css
/* Styles/app.css */
@import "tailwindcss";

/* Optional: Custom theme variables */
@theme {
    --breakpoint-3xl: 112rem;
}

/* Optional: Custom base styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}
```

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

### Utility Methods for Tailwind CSS CLI

Source: https://github.com/luissena/tailwindblazor/blob/main/llms-full.txt

Provides static utility methods for managing the Tailwind CSS CLI binary. This includes functions to get cache directories, platform identifiers, binary names, download URLs, and to resolve and ensure the CLI is downloaded and available.

```csharp
public static string GetCacheDirectory(string version)
public static string GetPlatformIdentifier()
public static string GetBinaryName(string platform)
public static string GetDownloadUrl(string version, string binaryName)
public static string ResolveCliPath(TailwindOptions options)
public static async Task EnsureCliAsync(TailwindOptions options, ILogger? logger = null, CancellationToken cancellationToken = default)
```

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

### Initialize Tailwind CSS in Blazor Program.cs

Source: https://github.com/luissena/tailwindblazor/blob/main/llms.txt

This snippet demonstrates the minimal code required to integrate Tailwind CSS into a Blazor application. It involves adding a single line to the program's builder configuration. No external dependencies or complex setup are needed.

```csharp
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

// Integrate Tailwind CSS v4
builder.UseTailwind();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) {
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

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

### Register TailwindBlazor Services with UseTailwind

Source: https://context7.com/luissena/tailwindblazor/llms.txt

Registers TailwindBlazor services using the `UseTailwind` extension method on `WebApplicationBuilder`. This sets up the hosted service for watch mode and binds configuration from appsettings.json. Supports minimal setup or custom configuration for input/output files and CLI path.

```csharp
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);

// Minimal setup with default options
builder.UseTailwind();

// Or with custom configuration
builder.UseTailwind(options =>
{
    options.InputFile = "Styles/app.css";
    options.OutputFile = "wwwroot/css/tailwind.css";
    options.CliPath = "/custom/path/to/tailwindcss";
    options.TailwindVersion = "4.1.18";
});

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();
```

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

### TailwindHostedService

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

An IHostedService that runs the Tailwind CSS CLI in watch mode during development. It handles downloading the CLI, starting the watch process, and managing its lifecycle.

```APIDOC
## TailwindHostedService

### Description
An `IHostedService` that runs the Tailwind CSS CLI in watch mode during development. It's automatically registered when `builder.UseTailwind()` is called.

### Behavior
- **Development Only**: Active only when `IHostEnvironment.IsDevelopment()` returns `true`.
- **On Start**: Downloads the CLI if needed and spawns `tailwindcss --watch` as a background process.
- **On Stop**: Kills the entire process tree associated with the Tailwind CLI.
- **Logging**: Streams stdout to `ILogger` at Debug level and stderr at Warning level.

### Usage
This service is automatically managed when `builder.UseTailwind()` is invoked. No direct usage is required.
```

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

### Use Tailwind Classes in Razor Component

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This HTML snippet shows an example of using Tailwind CSS classes directly within a Razor component to style an element. This illustrates the ease of applying styles after setup.

```html
<h1 class="text-3xl font-bold text-gray-900">Hello, TailwindBlazor!</h1>
```

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

### Create CSS Entry Point

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This step involves creating a CSS file named 'app.css' in the 'Styles' directory of your project root. This file will import Tailwind CSS.

```css
@import "tailwindcss";
```

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

### TailwindCliDownloader Utility Methods

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Provides static utility methods for managing the Tailwind CSS CLI binary. This includes functions to determine cache directories, platform identifiers, binary names, download URLs, and resolving the CLI path. It also includes a method to ensure the CLI is downloaded and cached.

```csharp
public static string GetCacheDirectory(string version)
{
    // Returns the cache directory path: ~/.tailwindblazor/cli/<version>/
    return "";
}

public static string GetPlatformIdentifier()
{
    // Returns the platform string (e.g., "macos-arm64", "linux-x64", "windows-x64").
    return "";
}

public static string GetBinaryName(string platform)
{
    // Returns the CLI binary filename (e.g., "tailwindcss-macos-arm64", "tailwindcss-windows-x64.exe").
    return "";
}

public static string GetDownloadUrl(string version, string binaryName)
{
    // Returns the GitHub releases download URL for the specified version and binary.
    return "";
}

public static string ResolveCliPath(TailwindOptions options)
{
    // Returns the full path to the CLI binary. Uses options.CliPath if set, otherwise resolves from cache.
    return "";
}

public static async Task EnsureCliAsync(
    TailwindOptions options,
    ILogger? logger = null,
    CancellationToken cancellationToken = default)
{
    // Downloads the CLI binary if not already cached. No-op if the binary already exists.
    await Task.CompletedTask;
}
```

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

### Configure TailwindBlazor in Program.cs

Source: https://github.com/luissena/tailwindblazor/blob/main/site/wwwroot/index.html

Add the `builder.UseTailwind();` extension method to your `Program.cs` file to enable TailwindBlazor integration. This typically happens after `builder.Services.AddRazorPages();` or `builder.Services.AddServerSideBlazor();`.

```csharp
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Enable TailwindBlazor integration
builder.UseTailwind();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) {
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

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

### TailwindCliDownloader Utility Methods

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Provides static methods for managing the Tailwind CLI binary, including cache directory resolution, platform identification, binary naming, download URL generation, path resolution, and ensuring the CLI is downloaded.

```APIDOC
## TailwindCliDownloader

### Description
Static utility class for managing the Tailwind CLI binary.

### Methods

#### GetCacheDirectory
```csharp
public static string GetCacheDirectory(string version)
```
Returns the cache directory path: `~/.tailwindblazor/cli/<version>/`.

#### GetPlatformIdentifier
```csharp
public static string GetPlatformIdentifier()
```
Returns the platform string (e.g., `"macos-arm64"`, `"linux-x64"`, `"windows-x64"`).

#### GetBinaryName
```csharp
public static string GetBinaryName(string platform)
```
Returns the CLI binary filename (e.g., `"tailwindcss-macos-arm64"`, `"tailwindcss-windows-x64.exe"`).

#### GetDownloadUrl
```csharp
public static string GetDownloadUrl(string version, string binaryName)
```
Returns the GitHub releases download URL for the specified version and binary.

#### ResolveCliPath
```csharp
public static string ResolveCliPath(TailwindOptions options)
```
Returns the full path to the CLI binary. Uses `options.CliPath` if set, otherwise resolves from cache.

#### EnsureCliAsync
```csharp
public static async Task EnsureCliAsync(
    TailwindOptions options,
    ILogger? logger = null,
    CancellationToken cancellationToken = default)
```
Downloads the CLI binary if not already cached. No-op if the binary already exists.
```

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

### Utility Methods for Tailwind CLI Management (C#)

Source: https://github.com/luissena/tailwindblazor/blob/main/site/wwwroot/llms-full.txt

Provides static utility methods for managing the Tailwind CSS CLI binary, including resolving cache directories, platform identifiers, binary names, download URLs, and ensuring the CLI is downloaded and accessible.

```csharp
public static class TailwindCliDownloader
{
    public static string GetCacheDirectory(string version)
    public static string GetPlatformIdentifier()
    public static string GetBinaryName(string platform)
    public static string GetDownloadUrl(string version, string binaryName)
    public static string ResolveCliPath(TailwindOptions options)
    public static async Task EnsureCliAsync(TailwindOptions options, ILogger? logger = null, CancellationToken cancellationToken = default)
}
```

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

### TailwindCliDownloader Static Class

Source: https://github.com/luissena/tailwindblazor/blob/main/llms-full.txt

Utility class for downloading and resolving the Tailwind CSS CLI binary.

```APIDOC
## TailwindCliDownloader (Static Class)

### Description
Provides static methods for managing the Tailwind CSS CLI binary, including determining cache directories, platform identifiers, binary names, download URLs, and ensuring the CLI is available for use.

### Methods
- **GetCacheDirectory(string version)**: Returns the cache directory path for a specific Tailwind CLI version.
- **GetPlatformIdentifier()**: Returns a string identifying the current operating system and architecture.
- **GetBinaryName(string platform)**: Returns the expected binary name for a given platform identifier.
- **GetDownloadUrl(string version, string binaryName)**: Constructs the download URL for a specific Tailwind CLI version and binary name.
- **ResolveCliPath(TailwindOptions options)**: Resolves the full path to the Tailwind CLI executable based on the provided options.
- **EnsureCliAsync(TailwindOptions options, ILogger? logger = null, CancellationToken cancellationToken = default)**: Asynchronously ensures the Tailwind CLI is downloaded and available in the cache. Optionally logs progress.

### Example Usage (Internal)
This class is typically used internally by `UseTailwind` and the MSBuild targets. Direct usage is generally not required for most users.
```

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

### Register TailwindBlazor Service in Program.cs

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This code snippet shows how to register the TailwindBlazor service in your 'Program.cs' file. The `UseTailwind()` extension method configures the necessary services for Tailwind CSS integration.

```csharp
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);
builder.UseTailwind();
```

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

### TailwindCliDownloader Utility Class for Tailwind CLI Management (C#)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

This C# utility class, `TailwindCliDownloader`, handles the management of the Tailwind CSS CLI binary. It provides methods for resolving paths, identifying the current platform, downloading the CLI if not cached, and constructing download URLs.

```csharp
using TailwindBlazor;

// Get the cache directory for a specific version
string cacheDir = TailwindCliDownloader.GetCacheDirectory("4.1.18");
// Returns: ~/.tailwindblazor/cli/4.1.18/

// Get the current platform identifier
string platform = TailwindCliDownloader.GetPlatformIdentifier();
// Returns: "macos-arm64", "linux-x64", "windows-x64", etc.

// Get the binary filename for a platform
string binaryName = TailwindCliDownloader.GetBinaryName("macos-arm64");
// Returns: "tailwindcss-macos-arm64"

string windowsBinary = TailwindCliDownloader.GetBinaryName("windows-x64");
// Returns: "tailwindcss-windows-x64.exe"

// Get the GitHub releases download URL
string url = TailwindCliDownloader.GetDownloadUrl("4.1.18", "tailwindcss-macos-arm64");
// Returns: "https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.18/tailwindcss-macos-arm64"

// Resolve the full CLI path from options
var options = new TailwindOptions { TailwindVersion = "4.1.18" };
string cliPath = TailwindCliDownloader.ResolveCliPath(options);
// Returns: ~/.tailwindblazor/cli/4.1.18/tailwindcss-<platform>

// Ensure CLI is downloaded (async, with optional logger)
await TailwindCliDownloader.EnsureCliAsync(options, logger, cancellationToken);
```

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

### UseTailwind Extension Method

Source: https://github.com/luissena/tailwindblazor/blob/main/llms-full.txt

Registers the Tailwind CSS hosted service and allows configuration of Tailwind options. This method should be called in your application's Program.cs file.

```APIDOC
## UseTailwind (Extension Method)

### Description
Registers the `TailwindHostedService` and binds `TailwindOptions` from the `Tailwind` configuration section. This enables Tailwind CSS processing during development.

### Method
`public static WebApplicationBuilder UseTailwind(
    this WebApplicationBuilder builder,
    Action<TailwindOptions>? configure = null
)
`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```csharp
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

builder.UseTailwind(options => {
    options.InputFile = "wwwroot/css/app.css";
    options.OutputFile = "wwwroot/css/tailwind.css";
});

var app = builder.Build();
```

### Response
#### Success Response (200)
N/A (This is a configuration method)

#### Response Example
N/A
```

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

### MSBuild Targets for Tailwind CSS Compilation

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Describes the MSBuild targets provided by the TailwindBlazor NuGet package. `_TailwindEnsureCli` downloads the necessary CLI before compilation, and `_TailwindBuildCss` compiles the CSS from the input to the output file.

```xml
<Target Name="_TailwindEnsureCli" BeforeTargets="_TailwindBuildCss">
    <!-- Downloads CLI if not cached -->
</Target>

<Target Name="_TailwindBuildCss" BeforeTargets="BeforeBuild">
    <!-- Compiles CSS from input to output -->
</Target>
```

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

### Configure TailwindBlazor Runtime Options (C#)

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/configuration.md

Customize TailwindBlazor's runtime behavior using the `UseTailwind` overload in `Program.cs`. This allows setting input/output file paths, a custom CLI path, and the Tailwind CLI version.

```csharp
builder.UseTailwind(options =>
{
    options.InputFile = "Styles/app.css";
    options.OutputFile = "wwwroot/css/tailwind.css";
    options.CliPath = "/custom/path/to/tailwindcss";
    options.TailwindVersion = "4.1.18";
});
```

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

### Configure TailwindBlazor Settings (appsettings.json)

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/configuration.md

Bind TailwindBlazor configuration options from the `Tailwind` section in your `appsettings.json` file. This method allows for environment-specific configurations.

```json
{
  "Tailwind": {
    "InputFile": "Styles/app.css",
    "OutputFile": "wwwroot/css/tailwind.css",
    "TailwindVersion": "4.1.18"
  }
}
```

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

### TailwindOptions Configuration

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Defines the configuration options for Tailwind CSS integration, including input and output file paths, CLI path, and Tailwind CSS version.

```APIDOC
## TailwindOptions

### Description
Configuration options for the Tailwind CSS integration.

### Properties
- **InputFile** (`string`) - Required - Default: `"Styles/app.css"` - CSS entry point relative to the content root.
- **OutputFile** (`string`) - Required - Default: `"wwwroot/css/tailwind.css"` - Generated CSS output path relative to the content root.
- **CliPath** (`string?`) - Optional - Default: `null` - Absolute path to a custom Tailwind CLI binary. When set, skips auto-download.
- **TailwindVersion** (`string`) - Required - Default: `"4.1.18"` - Tailwind CSS CLI version to download from GitHub releases.

### Binding from appsettings.json
```json
{
  "Tailwind": {
    "InputFile": "Styles/app.css",
    "OutputFile": "wwwroot/css/tailwind.css",
    "TailwindVersion": "4.1.18"
  }
}
```

### Request Example (Configuration)
```json
{
  "Tailwind": {
    "InputFile": "./src/styles/main.css",
    "OutputFile": "./public/assets/css/bundle.css",
    "CliPath": "/usr/local/bin/tailwind",
    "TailwindVersion": "3.0.0"
  }
}
```
```

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

### Run Project with Hot Reload and Watch Mode (dotnet CLI)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

Commands to run the .NET project with hot reload and watch mode enabled. This allows for automatic recompilation and browser refresh upon code changes. Logs during watch mode appear at the Debug level in the console.

```bash
dotnet watch

dotnet run --environment Development
```

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

### Configure TailwindBlazor Build Properties (.csproj)

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/configuration.md

Control build-time behavior of TailwindBlazor by setting MSBuild properties in your .csproj file. These properties define the Tailwind CLI version, input/output file paths, and whether the process is enabled or minified.

```xml
<PropertyGroup>
  <TailwindVersion>4.1.18</TailwindVersion>
  <TailwindInputFile>Styles/app.css</TailwindInputFile>
  <TailwindOutputFile>wwwroot/css/tailwind.css</TailwindOutputFile>
  <TailwindEnabled>true</TailwindEnabled>
  <TailwindMinify>false</TailwindMinify>
</PropertyGroup>
```

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

### Set Custom Tailwind CLI Path (C#)

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/configuration.md

Specify a custom path to your pre-downloaded Tailwind CSS CLI binary using the `CliPath` option in the C# configuration. This bypasses the automatic download process.

```csharp
builder.UseTailwind(o => o.CliPath = "/usr/local/bin/tailwindcss");
```

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

### Register TailwindBlazor Services with WebApplicationBuilder

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Provides an extension method to register TailwindBlazor services and configure Tailwind CSS options. It binds configuration from the 'Tailwind' section and allows for optional custom configuration via a delegate. This is the primary method for integrating TailwindBlazor into a Blazor application.

```csharp
public static WebApplicationBuilder UseTailwind(
    this WebApplicationBuilder builder,
    Action<TailwindOptions>? configure = null)
{
    // Registers the TailwindHostedService and binds TailwindOptions
    // from the "Tailwind" configuration section. Optionally accepts a delegate to further configure options.
    return builder;
}
```

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

### Enable Tailwind CSS in Program.cs

Source: https://github.com/luissena/tailwindblazor/blob/main/README.md

Configures the Blazor application to use Tailwind CSS by calling the `UseTailwind()` extension method on the WebApplication builder. This should be done before building the application.

```csharp
// Program.cs
using TailwindBlazor;

var builder = WebApplication.CreateBuilder(args);
builder.UseTailwind();
```

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

### MSBuild Properties for TailwindBlazor Configuration

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Lists MSBuild properties that can be overridden in a `.csproj` file to configure TailwindBlazor's behavior. These properties control the Tailwind CLI version, input/output paths, enablement, minification, and custom CLI path.

```xml
<PropertyGroup>
    <TailwindVersion>4.1.18</TailwindVersion>
    <TailwindInputFile>Styles/app.css</TailwindInputFile>
    <TailwindOutputFile>wwwroot/css/tailwind.css</TailwindOutputFile>
    <TailwindEnabled>true</TailwindEnabled>
    <TailwindMinify>$(Optimize)</TailwindMinify>
    <TailwindCliPath>Auto-resolved</TailwindCliPath>
</PropertyGroup>
```

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

### Import Tailwind CSS in app.css

Source: https://github.com/luissena/tailwindblazor/blob/main/README.md

Includes the Tailwind CSS directives in your main CSS file (e.g., Styles/app.css) to enable Tailwind's utility classes. This assumes a standard Blazor project structure.

```css
/* Styles/app.css */
@import "tailwindcss";
```

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

### Configure TailwindOptions Class

Source: https://context7.com/luissena/tailwindblazor/llms.txt

Defines the `TailwindOptions` class for customizing Tailwind CSS integration. Options like `InputFile`, `OutputFile`, `CliPath`, and `TailwindVersion` can be set via C# delegates or other configuration methods.

```csharp
// TailwindOptions properties and defaults:
public class TailwindOptions
{
    public string InputFile { get; set; } = "Styles/app.css";
    public string OutputFile { get; set; } = "wwwroot/css/tailwind.css";
    public string? CliPath { get; set; }  // null = auto-download
    public string TailwindVersion { get; set; } = "4.1.18";
}

// Configure via C# in Program.cs
builder.UseTailwind(options =>
{
    options.InputFile = "Styles/custom.css";
    options.OutputFile = "wwwroot/styles/output.css";
    options.TailwindVersion = "4.0.0";
});
```

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

### Reference Generated CSS in App.razor or _Host.cshtml

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/getting-started.md

This HTML snippet demonstrates how to link the generated Tailwind CSS file in your Blazor application's main layout file. This ensures that Tailwind styles are applied to your components.

```html
<link rel="stylesheet" href="css/tailwind.css" />
```

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

### Configure Tailwind CLI Path in Blazor Projects

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/troubleshooting.md

If the Tailwind CLI download fails due to network restrictions, you can manually specify the path to the downloaded binary. This ensures the build process can locate and use the CLI.

```xml
<PropertyGroup>
  <TailwindCliPath>/path/to/tailwindcss</TailwindCliPath>
</PropertyGroup>
```

```csharp
builder.UseTailwind(o => o.CliPath = "/path/to/tailwindcss");
```

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

### Run Tailwind CSS in Development Watch Mode (Bash)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

When the ASPNETCORE_ENVIRONMENT is set to 'Development', the Blazor hosted service automatically enables Tailwind CSS watch mode. This provides instant CSS rebuilds upon changes to Razor components, streamlining the development workflow.

```bash

```

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

### MSBuild Properties

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Configurable MSBuild properties that control Tailwind CSS integration behavior during the build process. These can be overridden in the project's `.csproj` file.

```APIDOC
## MSBuild Properties

### Description
Properties set automatically by the NuGet package that can be overridden in your `.csproj` file to customize Tailwind CSS integration.

| Property | Default | Description |
|----------|---------|-------------|
| `TailwindVersion` | `4.1.18` | CLI version to use. |
| `TailwindInputFile` | `Styles/app.css` | CSS entry point for compilation. |
| `TailwindOutputFile` | `wwwroot/css/tailwind.css` | Output path for the compiled CSS. |
| `TailwindEnabled` | `true` | Enables or disables the Tailwind build target. |
| `TailwindMinify` | `$(Optimize)` | Enables CSS minification when `Optimize` is true (typically in Release builds). |
| `TailwindCliPath` | Auto-resolved | Specifies a custom path to the Tailwind CLI binary, bypassing auto-resolution. |

### Usage Example (in .csproj)
```xml
<PropertyGroup>
  <TailwindVersion>3.2.0</TailwindVersion>
  <TailwindInputFile>./ClientApp/styles/tailwind.css</TailwindInputFile>
  <TailwindEnabled>false</TailwindEnabled>
</PropertyGroup>
```
```

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

### TailwindServiceExtensions.UseTailwind

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Registers TailwindBlazor services with the WebApplicationBuilder. This method sets up the necessary components for Tailwind CSS integration, including the hosted service and options configuration.

```APIDOC
## UseTailwind

### Description
Registers the `TailwindHostedService` and binds `TailwindOptions` from the configuration. Optionally accepts a delegate to further configure options.

### Method
`static WebApplicationBuilder UseTailwind(this WebApplicationBuilder builder, Action<TailwindOptions>? configure = null)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```csharp
// Minimal usage
builder.UseTailwind();

// With custom options
builder.UseTailwind(options =>
{
    options.InputFile = "Styles/app.css";
    options.OutputFile = "wwwroot/css/tailwind.css";
    options.CliPath = "/custom/path/to/tailwindcss";
    options.TailwindVersion = "4.1.18";
});
```

### Response
#### Success Response (200)
Returns the same `WebApplicationBuilder` instance for chaining.

#### Response Example
```json
{
  "message": "WebApplicationBuilder instance returned for chaining."
}
```
```

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

### Specify Custom CLI Path for Tailwind CSS (C# and XML)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

This configuration allows you to set a custom path for the Tailwind CSS CLI binary. This is particularly useful for CI/CD environments or air-gapped systems where the CLI is pre-downloaded and not managed by the auto-downloader.

```csharp
// Using C# options
builder.UseTailwind(options =>
{
    options.CliPath = "/usr/local/bin/tailwindcss";
});
```

```xml
<!-- Using MSBuild property in .csproj -->
<PropertyGroup>
  <TailwindCliPath>/usr/local/bin/tailwindcss</TailwindCliPath>
</PropertyGroup>
```

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

### Pin Tailwind CSS Version (C#, XML, JSON)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

This feature allows you to specify a particular version of the Tailwind CSS CLI to ensure reproducible builds across different environments. The version can be set using C# options, MSBuild properties in the .csproj file, or within a JSON configuration file.

```csharp
// Via C# options
builder.UseTailwind(o => o.TailwindVersion = "4.0.0");
```

```xml
<!-- Via MSBuild property -->
<PropertyGroup>
  <TailwindVersion>4.0.0</TailwindVersion>
</PropertyGroup>
```

```json
{
  "Tailwind": {
    "TailwindVersion": "4.0.0"
  }
}
```

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

### Set Custom Tailwind CSS Version (XML and C#)

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/configuration.md

Pin a specific Tailwind CSS version for your project. This can be done either in the `.csproj` file using the `TailwindVersion` MSBuild property or at runtime via the C# configuration options.

```xml
<!-- .csproj -->
<PropertyGroup>
  <TailwindVersion>4.0.0</TailwindVersion>
</PropertyGroup>
```

```csharp
builder.UseTailwind(o => o.TailwindVersion = "4.0.0");
```

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

### MSBuild Targets

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

MSBuild targets provided by the TailwindBlazor NuGet package to manage the Tailwind CSS build process, including CLI download and CSS compilation.

```APIDOC
## MSBuild Targets

### Description
MSBuild targets provided by the TailwindBlazor NuGet package to facilitate the build process.

| Target | Runs Before | Description |
|--------|-------------|-------------|
| `_TailwindEnsureCli` | `_TailwindBuildCss` | Ensures the Tailwind CLI is downloaded and available in the cache before compilation. |
| `_TailwindBuildCss` | `BeforeBuild` | Compiles the CSS using the Tailwind CLI, transforming the input file to the output file. |

### Build Process Integration
These targets are automatically integrated into the standard build process. `_TailwindEnsureCli` runs before `_TailwindBuildCss`, which in turn runs before the main `BeforeBuild` event, ensuring dependencies are met.
```

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

### Register Tailwind CSS Integration in Blazor

Source: https://github.com/luissena/tailwindblazor/blob/main/llms-full.txt

Registers the `TailwindHostedService` to enable Tailwind CSS processing. This method is typically called in the `Program.cs` file of a Blazor application. It allows for configuration of Tailwind CSS options via an `Action` delegate.

```csharp
public static WebApplicationBuilder UseTailwind(
    this WebApplicationBuilder builder,
    Action<TailwindOptions>? configure = null)
```

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

### TailwindOptions Class for Tailwind CSS Configuration

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/api-reference.md

Defines the configuration options for Tailwind CSS integration within a Blazor application. It specifies input and output file paths, an optional custom CLI path, and the Tailwind CSS CLI version. These options can be configured via code or appsettings.json.

```csharp
public class TailwindOptions
{
    public string InputFile { get; set; } = "Styles/app.css";
    public string OutputFile { get; set; } = "wwwroot/css/tailwind.css";
    public string? CliPath { get; set; }
    public string TailwindVersion { get; set; } = "4.1.18";
}
```

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

### Verify Tailwind CSS Runtime Reference in Blazor

Source: https://github.com/luissena/tailwindblazor/blob/main/docs/troubleshooting.md

Ensure the browser can locate the generated `tailwind.css` file at runtime. The `href` attribute in the `<link>` tag must match the configured `TailwindOutputFile`, which defaults to `wwwroot/css/tailwind.css`.

```html
<!-- Must match TailwindOutputFile (default: wwwroot/css/tailwind.css) -->
<link rel="stylesheet" href="css/tailwind.css" />
```

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

### Use Tailwind Utility Classes in Blazor Razor Components (HTML)

Source: https://context7.com/luissena/tailwindblazor/llms.txt

Demonstrates how to apply Tailwind CSS utility classes directly within Blazor Razor components for styling. The Tailwind CLI automatically scans Razor, CSHTML, and HTML files to generate only the necessary CSS.

```html
@page "/example"

<div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <header class="bg-white dark:bg-gray-800 shadow">
        <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
                Dashboard
            </h1>
        </div>
    </header>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-lg transition-shadow">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
                    Card Title
                </h2>
                <p class="text-gray-600 dark:text-gray-400">
                    Card content with Tailwind styling.
                </p>
                <button class="mt-4 px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors">
                    Action
                </button>
            </div>
        </div>
    </main>
</div>
```