Blazor项目配置Tailwind CSS 4.x

时间：2025-05-26 19:30

人气：

作者：admin

标签：

导读：前置已安装node.js，可使用npm 仅适用于目前的4.x(我使用的是4.1)。基于.net 10 preview-4 Blazor Server Webapp 默认模板，但是这个关系不大。安装在根目录安装tailwindcss cli npm install tailwindcss @...

前置

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

安装

在根目录安装tailwindcss cli

npm install tailwindcss @tailwindcss/cli

实际上也可以在安装在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

温馨提示：以上内容整理于网络，仅供参考，如果对您有帮助，留下您的阅读感言吧！

Blazor项目配置Tailwind CSS 4.x

前置

安装

编译与使用

1. 使用

2. 编译

2.1. 实时编译

2.2 构建时编译

3. 引用

成果

鸣谢

相关阅读

本类排行

相关标签

本类推荐

栏目热点

猜你喜欢