Blazor项目配置Tailwind CSS 4.x

2025年5月26日
| 没有评论

前置

  1. 已安装node.js，可使用npm
  2. 仅适用于目前的4.x(我使用的是4.1)。
  3. 基于.net 10 preview-4 Blazor Server Webapp 默认模板，但是这个关系不大。

安装

  1. 在根目录安装tailwindcss cli
npm install tailwindcss @tailwindcss/cli
  1. 新建tailwind.config.js文件
module.exports = {
    content: [
	//配置要监视的文件
        './**/*.razor',
        './wwwroot/app.css'
    ],
}

实际上也可以在安装在wwwroot等目录，只要确保能配置正确的监视文件路径就行

编译与使用

1. 使用

// 引用tailwindcss
// 以我的./wwwroot/app.css为例
// 其实直接新建一个新的空的css也行，并不必须在网页中引用这个输入文件。
@import "tailwindcss";

在razor页面中书写tailwind css相关样式

@page "/"

<PageTitle>Home</PageTitle>

<h1 class="text-red-500 border-2">Hello, world!</h1>
Welcome to your new app.

2. 编译

2.1. 实时编译

// 通过cli实时监视文件变化来编译。缺点是每次打开项目的时候都要运行一次这个命令。
// -i 后面为输入文件，即步骤1中的引用了tailwindcss的css文件
// -0 后面为输出文件，记得在主页中引用，否则不会生效
// --wathc/-w 实时监视文件变化并编译，不加的话就是运行时编译一次
npx @tailwindcss/cli -i ./wwwroot/app.css -o ./wwwroot/output.css --watch

2.2 构建时编译

// 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>

3. 引用

<!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>

成果

@page "/"

<PageTitle>Home</PageTitle>

<h1 class="text-red-500 border-2">Hello, world!</h1>
Welcome to your new app.

由于tailwind css和bootstrap中许多命名相同，虽然删除了自带的bootstrap引用，并只对home页面中的hello world添加了样式，但是整体视觉效果看起来差别不大。
对用惯了bootstrap框架的开发者来说还挺友好。

鸣谢

以上综合了官网和部分网友的例子

tailwind css https://tailwindcss.com/docs/upgrade-guide
知乎-呆牛【在Blazor Server中使用tailwindcss】https://zhuanlan.zhihu.com/p/634290978

.net, abp