Blazor项目配置Tailwind CSS 4.x
前置[*]已安装node.js，可使用npm
[*]仅适用于目前的4.x(我使用的是4.1)。
[*]基于.net 10 preview-4 Blazor Server Webapp 默认模板，但是这个关系不大。
安装
[*]在根目录安装tailwindcss cli
npm install tailwindcss @tailwindcss/cli
[*]新建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 >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 --watch2.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["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/>
</body>
</html>成果
@page "/"
<PageTitle>Home</PageTitle>
<h1 >Hello, world!</h1>
Welcome to your new app.由于tailwind css和bootstrap中许多命名相同，虽然删除了自带的bootstrap引用，并只对home页面中的hello world添加了样式，但是整体视觉效果看起来差别不大。
对用惯了bootstrap框架的开发者来说还挺友好。
https://img2024.cnblogs.com/blog/2902654/202505/2902654-20250526192036717-1303264262.png
鸣谢
以上综合了官网和部分网友的例子
tailwind css https://tailwindcss.com/docs/upgrade-guide
知乎-呆牛【在Blazor Server中使用tailwindcss】https://zhuanlan.zhihu.com/p/634290978
来源：新程序网络收集，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]