Blazor项目配置Tailwind CSS 4.x
<h2 id="前置">前置</h2><ol>
<li>已安装node.js，可使用npm</li>
<li>仅适用于目前的4.x(我使用的是4.1)。</li>
<li>基于.net 10 preview-4 Blazor Server Webapp 默认模板，但是这个关系不大。</li>
</ol>
<h2 id="安装">安装</h2>
<p>在根目录安装tailwindcss cli</p>
<pre><code>npm install tailwindcss @tailwindcss/cli
</code></pre>
<blockquote>
<p>实际上也可以在安装在wwwroot等目录，只要确保能配置正确的监视文件路径就行</p>
</blockquote>
<h2 id="编译与使用">编译与使用</h2>
<h3 id="1-使用">1. 使用</h3>
<pre><code>// 引用tailwindcss
// 以我的./wwwroot/app.css为例
// 其实直接新建一个新的空的css也行，并不必须在网页中引用这个输入文件。
@import "tailwindcss";
</code></pre>
<p>在razor页面中书写tailwind css相关样式</p>
<pre><code>@page "/"
<PageTitle>Home</PageTitle>
<h1 class="text-red-500 border-2">Hello, world!</h1>
Welcome to your new app.
</code></pre>
<h3 id="2-编译">2. 编译</h3>
<h4 id="21-实时编译">2.1. 实时编译</h4>
<pre><code class="language-cs">// 通过cli实时监视文件变化来编译。缺点是每次打开项目的时候都要运行一次这个命令。
// -i 后面为输入文件，即步骤1中的引用了tailwindcss的css文件
// -0 后面为输出文件，记得在主页中引用，否则不会生效
// --wathc/-w 实时监视文件变化并编译，不加的话就是运行时编译一次
npx @tailwindcss/cli -i ./wwwroot/app.css -o ./wwwroot/output.css --watch
</code></pre>
<h4 id="22-构建时编译">2.2 构建时编译</h4>
<pre><code>// 2.2.1 修改项目文件，使项目在构建前先输出css文件
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net10.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
// 加入下面这一段
<Target Name="Tailwind" BeforeTargets="Build">
<Exec Command="npx @tailwindcss/cli -i ./wwwroot/app.css -o ./wwwroot/output.css"/>
</Target>
</Project>
</code></pre>
<h3 id="3-引用">3. 引用</h3>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<base href="/"/>
<!--输入文件中如果本身没有样式，引用是没有意义的-->
<!--<link rel="stylesheet" href="@Assets["app.css"]"/>-->
<!--引用输出文件-->
<link rel="stylesheet" href="@Assets["output.css"]"/>
<link rel="stylesheet" href="@Assets["TwTest.styles.css"]"/>
<ImportMap/>
<link rel="icon" type="image/png" href="favicon.png"/>
<HeadOutlet @rendermode="InteractiveServer"/>
</head>
<body>
<Routes @rendermode="InteractiveServer"/>
<ReconnectModal/>
<script src="@Assets["_framework/blazor.web.js"]"></script>
</body>
</html>
</code></pre>
<h3 id="成果">成果</h3>
<pre><code>@page "/"
<PageTitle>Home</PageTitle>
<h1 class="text-red-500 border-2">Hello, world!</h1>
Welcome to your new app.
</code></pre>
<p>由于tailwind css和<code>bootstrap</code>中许多命名相同，虽然删除了自带的bootstrap引用，并只对home页面中的hello world添加了样式，但是整体视觉效果看起来差别不大。<br>
对用惯了bootstrap框架的开发者来说还挺友好。<br>
<img src="https://img2024.cnblogs.com/blog/2902654/202505/2902654-20250526192036717-1303264262.png"></p>
<h3 id="鸣谢">鸣谢</h3>
<p>以上综合了官网和部分网友的例子</p>
<blockquote>
<p>tailwind css https://tailwindcss.com/docs/upgrade-guide<br>
知乎-呆牛【在Blazor Server中使用tailwindcss】https://zhuanlan.zhihu.com/p/634290978</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/morcom/p/18897342
頁:
[1]