About The Project

Tailwind.MSBuild is a NuGet package that adds MSBuild tasks for building Tailwind CSS to your project. With this package, you can easily integrate Tailwind CSS into your .NET project and automatically generate your stylesheets as part of your project's build process. It will also download the Tailwind Standalone CLI so you don't need to have npm installed.

Disclaimer: This project is not affiliated with Tailwind Labs.

(back to top)

Getting Started

Installation

Use your preferred method of managing NuGet packages or use one of the following installation methods.

Visual Studio

Install Tailwind.MSBuild using the NuGet Package Manager or with the following command in the Package Manager Console:

.NET CLI

You can add a package reference using the following command when the .NET CLI is available:

Manually Edit Your .csproj File

You can manually add the following lines to your .csproj file within an ItemGroup:

Note: You will need to build your project once in order to create the initial configuration when using this method.

(back to top)

Basic Use

Once installed, you can customize Tailwind by modifying the tailwind.input.css files in your configuration directory which defaults to $(MSBuildProjectDirectory)\Properties\. If the directory or file does not exist, a default configuration will be initialized for you the next time you build your project. By default this file will add your project directory as a source path for Tailwind to scan for class names. For detailed instructions on configuring Tailwind CSS, see the official Configuration guide.

Each time you build your project, a css file will be generated at $(MSBuildProjectDirectory)\wwwroot\css\tailwind.css. You can also customize your input and output file paths. For example, to set your input file to "src/styles/tailwind.css" and your output file to "wwwroot/css/tailwind.css", you can add the following to your .csproj file:

(back to top)

Watch Mode

Tailwind.MSBuild supports watch and hot-reload workflows by starting the Tailwind CLI in watch mode when it can detect a watch build.

Auto-detected scenarios:

• When $(BuildingInsideVisualStudio) or $(DotNetWatchBuild) is true, TailwindWatch defaults to true and the build runs in watch mode.
• When running dotnet watch build or dotnet watch run --no-hot-reload, the TailwindStartWatchForDotNetWatch target runs after GenerateWatchList to start the build in watch mode.

Manual override for hot-reload:

• When running dotnet watch run (the default dotnet watch behavior), GenerateWatchList is not run and $(DotNetWatchBuild) is not set so there is no way to detect those builds. Use dotnet watch -p:TailwindWatch=true or add <TailwindWatch>true</TailwindWatch> in your MSBuild or project files to force tailwind to start in watch mode.

When watch mode is enabled, Tailwind.MSBuild launches the Tailwind CLI in its own window and does not manage the lifecycle further. Close that window when you want it to stop running.

To avoid duplicate Tailwind CLI instances during watch builds, Tailwind.MSBuild tracks running processes in a lock file. You can override the lock file location with TailwindLockFile.

(back to top)

Customize Your Build

Setting Build Properties

If you want to change any of the default settings Tailwind.MSBuild uses, you can override them by setting any of the following properties in your .csproj file.

⚠️ A note about TailwindInstallPath:

For the default install path, $(MSBuildThisFileDirectory) expands to the directory where Tailwind.MSBuild.props was extracted to. This means the default value of TailwindInstallPath is the equivilant of {NuGetPackageCache}\tailwind.msbuild\*VERSION*\cli\.

Here is a sample configuration that overrides every setting.

(back to top)

Executing Tasks

Tailwind.MSBuild.targets defines a build target named BuildTailwind that runs before the BeforeBuild target. This target executes two tasks that Tailwind.MSBuild implements. The first task is GetTailwindCLI which returns the absolute path to the tailwind CLI to the build engine. The output is stored in a property which is then passed to BuildTailwindCSS as the value for the StandaloneCliPath parameter.

For advanced scenarios where you need to run the tasks during a different point in the build process, see the tables below for the parameters required for each task and the associated MSBuild Property passed by default. It is recommended to read Tailwind.MSBuild.targets as an example of how to properly invoke the MSBuild tasks.

GetTailwindCLI

BuildTailwindCSS

(back to top)

License

Distributed under the MIT License. See LICENSE.md for more information.

Copyright © 2023 Michael Rasicci