Setup a project for Hydro toolkit

Hydro toolkit uses Tailwind. Some of the components are built using HyperUI as a base. If you don't have Tailwind in your project yet, please follow the instructions below.

Download Tailwind CLI for your operating system:

MacOS:

brew install tailwindcss

Windows:

winget install --id=TailwindLabs.TailwindCSS  -e

Go to your project directory and run:

tailwindcss init

File tailwind.config.js will be created. Update it with the following content:

module.exports = {
  content: ["./**/*.{cshtml,cs}"],
  darkMode: 'selector',
  theme: {
    extend: {
      colors: {
        main: {
          DEFAULT: "hsl(var(--main))",
          foreground: "hsl(var(--main-foreground))"
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          accent: "hsl(var(--primary-accent))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        error: {
          DEFAULT: "hsl(var(--error))",
          foreground: "hsl(var(--error-foreground))",
        },
        control: "hsl(var(--control))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
      }
    },
  }
}

Create file /wwwroot/css/input.css and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --main: 0 0% 100%;
    --main-foreground: 240 10% 3.9%;
    --primary: 220 75% 50%;
    --primary-accent: 220 75% 55%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 40%;
    --error: 0 84.2% 60.2%;
    --error-foreground: 0 0% 100%;
    --control: 240 5.9% 90%;
    --input: 240 4.9% 84%;
    --ring: 240 5% 65%;
  }
  .dark {
    --main: 221.25 19.51% 16.08%;
    --main-foreground: 0 0% 98%;
    --primary: 221.21 77.08% 51.35%;
    --primary-foreground: 0 0% 90%;
    --secondary: 220 19% 20%;
    --secondary-foreground: 0 0% 98%;
    --accent: 221.25 19.51% 14%;
    --accent-foreground: 221.25 19.51% 55%;
    --error: 0 84.2% 60.2%;
    --error-foreground: 0 0% 100%;
    --control: 217.5 13.11% 25%;
    --input: 217.5 13.11% 30%;
    --ring: 240 3.8% 46.1%;
  }
}

In layout add:

<link rel="stylesheet" href="~/css/output.css" asp-append-version="true" />;

Add a hosted service to your project that will run Tailwind tool for you during development:

using System.Diagnostics;

namespace YourProject;

public class TailwindHostedService : IHostedService
{
    private Process _process;

    public Task StartAsync(CancellationToken cancellationToken)
    {
        _process = Process.Start(new ProcessStartInfo
        {
            FileName = "tailwindcss",
            Arguments = "-i ./wwwroot/css/input.css -o ./wwwroot/css/output.css --watch",
            RedirectStandardOutput = true,
            RedirectStandardError = true,
            UseShellExecute = false,
            CreateNoWindow = true
        })!;

        _process.EnableRaisingEvents = true;
        _process.OutputDataReceived += (_, e) => LogInfo(e);
        _process.ErrorDataReceived += (_, e) => LogInfo(e);

        _process.BeginOutputReadLine();
        _process.BeginErrorReadLine();

        return Task.CompletedTask;
    }

    private static void LogInfo(DataReceivedEventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(e.Data))
        {
            Console.WriteLine($"Tailwind: {e.Data}");
        }
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
        Console.WriteLine("Tailwind: STOP");
        _process?.Kill(entireProcessTree: true);
        return Task.CompletedTask;
    }
}

Usage in your Startup.cs:

if (builder.Environment.IsDevelopment())
{
    services.AddHostedService<TailwindHostedService>();
}

In your csproj add a target that will build your styles when building for the first time or publishing:

<Target Name="BuildTailwind" BeforeTargets="Build">
  <PropertyGroup>
    <TailwindMinify Condition="'$(Configuration)'=='Release'">--minify</TailwindMinify>
  </PropertyGroup>
  <Exec Command="tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css $(TailwindMinify)" />
</Target>

Now your project is prepared to use examples from Hydro toolkit!

Examples