Table of Contents
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.
Use your preferred method of managing NuGet packages or use one of the following installation methods.
Install Tailwind.MSBuild using the NuGet Package Manager or with the following command in the Package Manager Console:
PM> Install-Package Tailwind.MSBuildYou can add a package reference using the following command when the .NET CLI is available:
> dotnet add package Tailwind.MSBuildYou can manually add the following lines to your .csproj file within an ItemGroup:
<PackageReference Include="Tailwind.MSBuild" Version="1.*">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>Note: You will need to build your project once in order to create the initial configuration when using this method.
Once installed, you can customize Tailwind by modifying the tailwind.config.js and tailwind.input.css files in your configuration directory which defaults to $(MSBuildProjectDirectory)\Properties\. If the directory or either file does not exist, a default configuration including postcss will be initialized for you the next time you build your project. 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:
<PropertyGroup Label="Tailwind Properties">
<TailwindInputFile>$(MSBuildProjectDirectory)\src\styles\tailwind.css</TailwindInputFile>
<TailwindOutputFile>$(MSBuildProjectDirectory)\wwwroot\css\site.css</TailwindOutputFile>
</PropertyGroup>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.
| MSBuild Property Name | Default Value | Description |
|---|---|---|
| TailwindVersion | latest |
The version tag of the tailwind release to use. |
| TailwindInstallPath | $(MSBuildThisFileDirectory)..\cli\ |
The directory where the tailwindcss cli should be located. |
| TailwindConfigDir | $(MSBuildProjectDirectory)\Properties\ |
The directory containing the tailwind configuration files. |
| TailwindConfigFile | tailwind.config.js |
The name of the tailwind configuration file. |
| TailwindInputFile | tailwind.input.css |
The name of the input css file. |
| TailwindOutputFile | $(MSBuildProjectDirectory)\wwwroot\css\tailwind.css |
The path where the output css file will be located. |
| TailwindMinify | false for Debug builds, true for Release builds |
Whether the generated css should be minified or not. |
For the default install path,
$(MSBuildThisFileDirectory)expands to the directory where Tailwind.MSBuild.props was extracted to. This means the default value ofTailwindInstallPathis the equivilant of{NuGetPackageCache}\tailwind.msbuild\*VERSION*\cli\.
Here is a sample configuration that overrides every setting.
<PropertyGroup Label="Tailwind Properties">
<!-- Lock Tailwind Version -->
<TailwindVersion>v3.2.4</TailwindVersion>
<!-- Place Tailwind CLI in obj directory -->
<TailwindInstallPath>$(BaseIntermediateOutputPath)\tailwind-cli\</TailwindInstallPath>
<!-- Custom input and output file paths -->
<TailwindConfigDir>$(MSBuildProjectDirectory)\Tailwind\</TailwindConfigDir>
<!-- File names are relative to the TailwindConfigDir unless an absolute path is specified -->
<TailwindConfigFile>config.js</TailwindConfigFile>
<TailwindInputFile>input.css</TailwindInputFile>
<TailwindOutputFile>..\wwwroot\css\site.min.css</TailwindOutputFile>
<!-- Always minify the generated css -->
<TailwindMinify>true</TailwindMinify>
</PropertyGroup>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.
| Task Parameter | MSBuild Property |
|---|---|
| Version | TailwindVersion |
| RootInstallPath | TailwindInstallPath |
<GetTailwindCLI Version="$(TailwindVersion)" RootInstallPath="$(TailwindInstallPath)">
<Output TaskParameter="StandaloneCliPath" PropertyName="StandaloneCliPath" />
</GetTailwindCLI>| Task Parameter | MSBuild Property |
|---|---|
| StandaloneCliPath | Output of GetTailwindCLI |
| WorkingDir | TailwindConfigDir |
| ConfigFile | TailwindConfigFile |
| InputFile | TailwindInputFile |
| OutputFile | TailwindOutputFile |
| Minify | TailwindMinify |
<BuildTailwindCSS StandaloneCliPath="$(StandaloneCliPath)"
ConfigDir="$(TailwindConfigDir)"
ConfigFile="$(TailwindConfigFile)"
InputFile="$(TailwindInputFile)"
OutputFile="$(TailwindOutputFile)"
Minify="$(TailwindMinify)">
<Output TaskParameter="GeneratedCssFile" PropertyName="GeneratedCssFile" />
</BuildTailwindCSS>Distributed under the MIT License. See LICENSE.md for more information.
Copyright © 2023 Michael Rasicci