结合Tailwind和Blazor

如果将Tailwind结合Blazor。

Adding Tailwind CSS v3 to a Blazor app

What’s new in Tailwind CSS v3
- Tailwind3引入JIT作为默认设置
- https://tailwindcss.com/docs/installation/play-cdn提供了一个JS料库，以便你可以使用tailwind的功能，推荐只在开发过程使用
- 其他参考https://tailwindcss.com/blog/tailwindcss-v3
Trying things out using the new Tailwind CDN
- Adding the Play CDN to a Blazor app
  - 略。
Adding Tailwind CSS to a Blazor project
- 要么使用Tailwind CLI，要么使用PostCSS以及定制构建工具
  - CLI除了在NPM获取以外，还可以独立使用
- Integrating using the Tailwind CLI via NPM
  - 需要在tailwind配置文件中指定：
```
module.exports = {
  content: ["./src/**/*.{razor,html,cshtml}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
  - 通过bash npx tailwindcss -i ./Styles/app.css -o ./wwwroot/app.css --watch来实时检测改动
  - dotnet watch或者VS hot reload可以自动更新改动，但是有些时候更新存在10-15秒延迟
- Integrating using the new Tailwind standalone CLI
  - 可以从https://github.com/tailwindlabs/tailwindcss/releases处下载独立的Tailwind CLI。
  - 其他操作和NPM的版本类似
  - 但是VS的HotReload可能会遇到这个问题https://developercommunity.visualstudio.com/t/Hot-Reload-For-CSS-Not-Working-With-Blaz/1590384?space=8&q=hot+reload+css

总的来说，并没有啥特别之处啊。

Use Tailwind’s new JIT mode when developing Blazor applications

Introducing Tailwind.Extensions.AspNetCore
- 嗯，介绍了一个VS扩展：Tailwind.Extensions.AspNetCore，不过用户数不多。
Hot Reload Caveat
- 同样指向了这个问题https://developercommunity.visualstudio.com/t/Hot-Reload-For-CSS-Not-Working-With-Blaz/1590384?space=8&q=hot+reload+css

Using Tailwind CSS v3.1 with Blazor (.Net 6)

Setup with using Standalone Tailwind CSS CLI without Node.js
- 这里用到的是独立版的CLI
- 在工程中创建一个StaticAssets，用于保存tailwind的配置，style.css以及tailwind.config.js
  - 配置中还包括一个TailwindCli.targets，要加入到.csproj中： <Import Project="StaticAssets\TailwindCli.targets" />
- 依照具体情况，把style.css添加到Pages/_Layout.cshtml或wwwroot/index.html。
- 生成css的命令是：cd {ProjectDirectory}/StaticAssets/ && tailwindcss -i styles.css -o {ProjectDirectory}/wwwroot/css/styles.css -w
Setup with using Node.js and npm
- 针对NPM版Tailwind CLI的配置
- 生成css的命令是：cd {ProjectDirectory}/StaticAssets/ && npx --no-install tailwindcss -i styles.css -o {ProjectDirectory}/wwwroot/css/styles.css -w

具体的配置：

Blazor.csproj

	<!-- If you are using Node.js with npm -->
  <Import Project="StaticAssets\TailwindNpm.targets" />

	<!-- If you are using Standalone Tailwind CSS CLI -->
  <Import Project="StaticAssets\TailwindCli.targets" />

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../{Pages,Shared}/**/*.{cshtml,razor,cs,css}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
  ]
}

TailwindCli.targets

<Project>
  <ItemGroup>
    <AvailableItemName Include="TailwindCli" />
  </ItemGroup>

  <ItemGroup>
    <Content Update="StaticAssets/*" CopyToPublishDirectory="Never" />
  </ItemGroup>

  <Target Name="CheckIfTailwindCssIsInstalled">
    <PropertyGroup>
      <TailwindCssTestCommand Condition="$(OS) == Windows_NT">tailwindcss -h &gt; NUL</TailwindCssTestCommand>
      <TailwindCssTestCommand Condition="$(OS) != Windows_NT">tailwindcss -h &gt; /dev/null</TailwindCssTestCommand>
    </PropertyGroup>

    <Exec Command="$(TailwindCssTestCommand)" IgnoreExitCode="true" EchoOff="true">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Tailwind CSS is required to build and run this project. To continue, please install Tailwind CSS from https://github.com/tailwindlabs/tailwindcss/releases/latest, and then restart your command prompt or IDE." Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="ProcessScopedCssFiles" AfterTargets="_GenerateScopedCssFiles">
    <MSBuild Projects="$(MSBuildProjectFile)" Properties="CurrentScopedCssFile=%(_ScopedCssOutputs.Identity)" Targets="PostScopedCssCompile"></MSBuild>
  </Target>

  <Target Name="PostScopedCssCompile" AfterTargets="ProcessScopedCssFiles" DependsOnTargets="CheckIfTailwindCssIsInstalled" Condition="$(CurrentScopedCssFile) != ''">
    <Message Importance="high" Text="Building scoped css..." />

    <Exec Command="tailwindcss -i $(CurrentScopedCssFile) -o $(CurrentScopedCssFile) -c ./tailwind.config.js" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildThisFileDirectory)">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Error via build scoped css" Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="BuildCss" BeforeTargets="CoreBuild" DependsOnTargets="PostScopedCssCompile" Outputs="$(MSBuildProjectDirectory)/wwwroot/css/styles.css">
    <Message Text="Starting tailwindcss. This may take a while..." />

    <Exec Command="tailwindcss -i styles.css -o $(MSBuildProjectDirectory)/wwwroot/css/styles.css -m" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildThisFileDirectory)" EnvironmentVariables="NODE_ENV=production">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Error via build css" Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="PostStylesCssCompile" AfterTargets="Build">
    <Message Importance="high" Text="Run this command if you are in the watch mode" />
    <Message Importance="high" Text="cd $(MSBuildThisFileDirectory) &amp;&amp; tailwindcss -i styles.css -o $(MSBuildProjectDirectory)/wwwroot/css/styles.css -w" />
  </Target>
</Project>

TailwindNpm.targets

<Project>
  <ItemGroup>
    <AvailableItemName Include="TailwindNpm" />
  </ItemGroup>

  <ItemGroup>
    <Content Update="StaticAssets/*" CopyToPublishDirectory="Never" />
  </ItemGroup>

  <Target Name="CheckIfNodeJSIsInstalled">
    <PropertyGroup>
      <NodeTestCommand Condition="$(OS) == Windows_NT">node -v &gt; NUL</NodeTestCommand>
      <NodeTestCommand Condition="$(OS) != Windows_NT">node -v &gt; /dev/null</NodeTestCommand>
    </PropertyGroup>

    <Exec Command="$(NodeTestCommand)" IgnoreExitCode="true" EchoOff="true">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="NpmInstall" DependsOnTargets="CheckIfNodeJSIsInstalled" Condition="!Exists('$(MSBuildThisFileDirectory)package-lock.json')">
    <!-- If package-lock.json does not exists, perform an NPM install -->
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec Command="npm i" WorkingDirectory="$(MSBuildThisFileDirectory)" />
    <Copy SourceFiles="$(MSBuildThisFileDirectory)package-lock.json" DestinationFolder="$(BaseIntermediateOutputPath)" SkipUnchangedFiles="true" />
  </Target>

  <Target Name="NodeModulesInstall" DependsOnTargets="NpmInstall" Condition="!Exists('$(MSBuildThisFileDirectory)node_modules')">
    <!-- If node_modules does not exists, perform an NPM clean install -->
    <Message Importance="high" Text="Restoring node_modules using 'npm'. This may take several minutes..." />
    <Exec Command="npm ci --also=dev" WorkingDirectory="$(MSBuildThisFileDirectory)" />
    <Copy SourceFiles="$(MSBuildThisFileDirectory)package-lock.json" DestinationFolder="$(BaseIntermediateOutputPath)" SkipUnchangedFiles="true" />
  </Target>

  <Target Name="NpmCleanInstall" DependsOnTargets="NodeModulesInstall" Inputs="$(MSBuildThisFileDirectory)package-lock.json" Outputs="$(BaseIntermediateOutputPath)package-lock.json">
    <!-- If package-lock.json has changed, perform an NPM clean install -->
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec Command="npm ci --also=dev" WorkingDirectory="$(MSBuildThisFileDirectory)" />
    <Copy SourceFiles="$(MSBuildThisFileDirectory)package-lock.json" DestinationFolder="$(BaseIntermediateOutputPath)" SkipUnchangedFiles="true" />
  </Target>

  <Target Name="ProcessScopedCssFiles" AfterTargets="_GenerateScopedCssFiles">
    <MSBuild Projects="$(MSBuildProjectFile)"
             Properties="CurrentScopedCssFile=%(_ScopedCssOutputs.Identity)"
             Targets="PostScopedCssCompile">
    </MSBuild>
  </Target>

  <Target Name="PostScopedCssCompile" AfterTargets="ProcessScopedCssFiles" DependsOnTargets="NpmCleanInstall" Condition="$(CurrentScopedCssFile) != ''">
    <Message Importance="high" Text="Building scoped css..." />

    <Exec Command="npx --no-install tailwindcss -i $(CurrentScopedCssFile) -o $(CurrentScopedCssFile) -c ./tailwind.config.js"
          IgnoreExitCode="true"
          EchoOff="true"
          WorkingDirectory="$(MSBuildThisFileDirectory)">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Error via build scoped css" Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="BuildCss" BeforeTargets="CoreBuild" DependsOnTargets="PostScopedCssCompile" Outputs="$(MSBuildProjectDirectory)/wwwroot/css/styles.css">
    <Message Text="Starting tailwindcss. This may take a while..." />
		<Message Importance="high" Text="npx --no-install tailwindcss -i styles.css -o $(MSBuildProjectDirectory)/wwwroot/css/styles.css -m" />
    
    <Exec Command="npx --no-install tailwindcss -i styles.css -o $(MSBuildProjectDirectory)/wwwroot/css/styles.css -m"
          IgnoreExitCode="true"
          EchoOff="true"
          WorkingDirectory="$(MSBuildThisFileDirectory)"
          EnvironmentVariables="NODE_ENV=production">
      <Output TaskParameter="ExitCode" PropertyName="ExitCode" />
    </Exec>

    <Error Text="Error via build css" Condition="$(ExitCode) != 0" />
  </Target>

  <Target Name="PostStylesCssCompile" AfterTargets="Build">
    <Message Importance="high" Text="Run this command if you are in the watch mode" />
    <Message Importance="high" Text="cd $(MSBuildThisFileDirectory) &amp;&amp; npx --no-install tailwindcss -i styles.css -o $(MSBuildProjectDirectory)/wwwroot/css/styles.css -w" />
  </Target>
</Project>

Using Tailwind CSS in Blazor just got much easier. I created this sample app and guide to make it even easier for Blazor developers.

项目主页：https://github.com/tesar-tech/BlazorAndTailwind

其他

VS扩展

https://marketplace.visualstudio.com/items?itemName=KevinMueller.HtmlCssClassCompletion22

（本篇完）

Adding Tailwind CSS v3 to a Blazor app#

Use Tailwind’s new JIT mode when developing Blazor applications#

Using Tailwind CSS v3.1 with Blazor (.Net 6)#

Using Tailwind CSS in Blazor just got much easier. I created this sample app and guide to make it even easier for Blazor developers.#

其他#

Adding Tailwind CSS v3 to a Blazor app

Use Tailwind’s new JIT mode when developing Blazor applications

Using Tailwind CSS v3.1 with Blazor (.Net 6)

Using Tailwind CSS in Blazor just got much easier. I created this sample app and guide to make it even easier for Blazor developers.

其他