Sample PR with tailwind

[jirisykora83]

As you wrote on twitter, that you may want to try tailwind i make this simple setup with same ui.

This bring another requirement to have install tailwindcss.

npm install -D tailwindcss

Then via csproj i add building tailwind with each dotnet build (not sure how it works with hot reload).

Minify non-compress version of final css is about 15kb vs 159kb with bootstrap.

PS: sorry for converting few spaces to tabs i have some VS plugin and project do not have EditorConfig file with spaces

[davidfowl]

This bring another requirement to have install tailwindcss.

npm install -D tailwindcss

Then via csproj i add building tailwind with each dotnet build (not sure how it works with hot reload).

I'm not a fan of this requirement. it does look nice though!

[jirisykora83]

There are a few options on how it can be built.

1. Install tailwindcss "globaly"
2. use it as part of webpack (via postCSS)
3. standalone CLI (included in repo?)

---

4. i also found dotnet tool https://www.nuget.org/packages/tailwindcss.cli#readme-body-tab which maybe can be utilize (it should use tailwind.cli under the hood).

[duaneedwards]

If you use the tailwindcss.cli dotnet tool nuget package you can remove the node requirement completely.

I'd recommend a local tool install, and not a global install (dotnet tool install --local tailwindcss.cli)

Should you head down that route, I'd also recommend looking at the tailwindcss.msbuild nuget package which helps integrate the dotnet tool with msbuild. In my projects I usually opt for the 'Project file mode' configuration method where you simply add the cli arguments to your csproj like this:

<PropertyGroup>
    <TailwindCSSReleaseBuildArguments>-i input.css -o wwwroot/css/output.css --minify</TailwindCSSReleaseBuildArguments>
    <TailwindCSSDebugBuildArguments>-i input.css -o wwwroot/css/output.css</TailwindCSSDebugBuildArguments>
</PropertyGroup>

The only real clunky part of this is the dance required to insure the dotnet tool is actually installed. (dotnet restore does not restore dotnet tools)

There's a couple of issues around this dotnet restore behaviour that have some workarounds that you can refer to:

• Allow dotnet restore to also invoke dotnet tool restore dotnet/sdk#11253
• Make 'dotnet tool restore' Automatic dotnet/sdk#4241

I'll probably open source the tailwindcss.cli and tailwindcss.msbuild packages in the future, I just need to do a pass to make sure I haven't committed any secrets and clean up a few things first.