Tailwind MSBuild Script for ASPNetCore

readme.md

Simply add Tailwind.targets to your project with the following line.

<Import Project="Tailwind.targets" />

The scripts will look for any .css files in a Styles/ root folder of your project, and add them to the static assets during build.

package.json

{
  "private": true,
  "devDependencies": {
    "tailwindcss": "^3.4.7"
  }
}

Tailwind.targets

<Project>

  <Target Name="RestoreNpm" Condition="!Exists('node_modules')">
    <Exec Command="npm install" />
  </Target>

  <Target Name="ResolveTailwindAssetOutputs">
    <ItemGroup>
      <_TailwindAsset Include="@(None)" Condition="'%(Extension)' == '.css' And $([System.String]::Copy('%(RecursiveDir)').StartsWith('Styles\'))">
        <OutputFile>$(IntermediateOutputPath)%(RecursiveDir)%(FileName)%(Extension)</OutputFile>
      </_TailwindAsset>
    </ItemGroup>

    <ItemGroup>
      <UpToDateCheckInput Include="tailwind.config.js" Set="Css" />
      <UpToDateCheckInput Include="%(_TailwindAsset.Identity)" Set="Css" />
      <UpToDateCheckBuilt Include="%(_TailwindAsset.OutputFile)" Original="%(_TailwindAsset.Identity)" Set="Css" />
    </ItemGroup>
  </Target>

  <Target Name="BuildTailwindAssets" DependsOnTargets="ResolveTailwindAssetOutputs" Inputs="@(_TailwindAsset)" Outputs="%(OutputFile)">
    <Exec Command="npx tailwindcss -i @(_TailwindAsset) -o %(OutputFile)" Condition="'$(Optimize)' == 'false'" />
    <Exec Command="npx tailwindcss -i @(_TailwindAsset) -o %(OutputFile) --minify" Condition="'$(Optimize)' == 'true'" />

    <ItemGroup>
      <FileWrites Include="%(_TailwindAsset.OutputFile)" />
    </ItemGroup>
  </Target>

  <Target Name="ResolveTailwindStaticWebAsset" Condition="'$(NoBuild)' != 'true'"
    BeforeTargets="AssignTargetPaths"
    DependsOnTargets="ResolveStaticWebAssetsConfiguration;BuildTailwindAssets">

    <DiscoverStaticWebAssets
      Candidates="%(_TailwindAsset.OutputFile)"
      SourceId="$(PackageId)"
      Pattern="$(IntermediateOutputPath)styles/**"
      ContentRoot="$(IntermediateOutputPath)styles/"
      BasePath="$(StaticWebAssetBasePath)"
      AssetMergeSource="$(StaticWebAssetMergeTarget)"
    >
      <Output TaskParameter="DiscoveredStaticWebAssets" ItemName="StaticWebAsset" />
    </DiscoverStaticWebAssets>

  </Target>

</Project>