前置
- 已安装node.js，可利用npm
- 仅实用于现在的4.x(我利用的是4.1)。
- 基于.net 10 preview-4 Blazor Server Webapp 默认模板，但是这个关系不大。
安装
- npm install tailwindcss @tailwindcss/cli
- module.exports = {
- content: [
- //配置要监视的文件
- './**/*.razor',
- './wwwroot/app.css'
- ],
- }
实际上也可以在安装在wwwroot等目录，只要确保能配置正确的监视文件路径就行
编译与利用
1. 利用
- // 引用tailwindcss
- // 以我的./wwwroot/app.css为例
- // 其实直接新建一个新的空的css也行，并不必须在网页中引用这个输入文件。
- @import "tailwindcss";
- @page "/"
- <PageTitle>Home</PageTitle>
- <h1 >Hello, world!</h1>
- Welcome to your new app.
2.1. 实时编译
- // 通过cli实时监视文件变化来编译。缺点是每次打开项目的时候都要运行一次这个命令。
- // -i 后面为输入文件，即步骤1中的引用了tailwindcss的css文件
- // -0 后面为输出文件，记得在主页中引用，否则不会生效
- // --wathc/-w 实时监视文件变化并编译，不加的话就是运行时编译一次
- npx @tailwindcss/cli -i ./wwwroot/app.css -o ./wwwroot/output.css --watch
- // 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>
- <!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.
对用惯了bootstrap框架的开发者来说还挺友好。
鸣谢
以上综合了官网和部门网友的例子
tailwind css https://tailwindcss.com/docs/upgrade-guide
知乎-呆牛【在Blazor Server中利用tailwindcss】https://zhuanlan.zhihu.com/p/634290978
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
