Blazor默認(rèn)集成了bootstrap，對(duì)于我這種后端出身，對(duì)CSS一知半解的.NET開(kāi)發(fā)人員來(lái)說(shuō)，使用起來(lái)還是有一定難度的。

好不容易才學(xué)到點(diǎn)皮毛，結(jié)果前端人員居然告訴我，bootstrap已經(jīng)過(guò)時(shí)了，現(xiàn)在主流都用Tailwind CSS。WTF!

好吧，要學(xué)就學(xué)主流的，Let's GO!

什么是 Tailwind CSS？

按照官方(https://tailwindcss.com/)的解釋：

Tailwind是一個(gè)功能類(lèi)優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類(lèi)，它們能直接在腳本標(biāo)記語(yǔ)言中組合起來(lái)，構(gòu)建出任何設(shè)計(jì)。

用過(guò)bootstrap的都知道，bootstrap有很多定義好的組件樣式，如果只是開(kāi)發(fā)一些后臺(tái)管理項(xiàng)目，對(duì)樣式?jīng)]有特定要求，用bootstrap就很方便；但是如果和UI設(shè)計(jì)規(guī)范要求不一致（我們的就是），使用起來(lái)就很不方便，因?yàn)槟阈枰采w大量已有的樣式。

而Tailwind不提供默認(rèn)主題或任何預(yù)定義的UI組件，它帶有預(yù)設(shè)計(jì)的css類(lèi)，可以在HTML自由組合這些類(lèi)達(dá)到設(shè)計(jì)要求。例如按鈕可以這樣實(shí)現(xiàn)：

<button?class="px-3?py-2?rounded-md?bg-blue-600?text-white">Primary</button>

通過(guò)組合這些小的樣式類(lèi)，我們可以生成復(fù)雜的自定義樣式而不用寫(xiě)一行css代碼。

在這我就不介紹Tailwind的詳細(xì)功能了，相關(guān)資料，你可以到官方網(wǎng)站查看。

Blazor集成Tailwind

Tailwind官方文檔沒(méi)有Blazor如何集成的說(shuō)明，雖然可以用CDN方式引入：

<link?href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"?rel="stylesheet">

但是連官方都不推薦，因?yàn)镃DN文件尺寸很大(73.2kB compressed, 3020.7kB raw)，會(huì)影響加載性能。

所以，只能參照官方文檔，通過(guò)npm方式安裝Tailwind。

初始化

在命令行窗口下，進(jìn)入Blazor項(xiàng)目的根目錄，執(zhí)行下面命令（當(dāng)然，你首先需要安裝Node.js和npm）：

npm?init

一路回車(chē)，最后會(huì)生成package.json文件。

安裝Tailwind及其依賴(lài)項(xiàng)

執(zhí)行下面的命令進(jìn)行安裝：

npm?install?tailwindcss?postcss?postcss-cli?autoprefixer

• tailwindcss: Tailwind CSS；

• postcss和postcss-clicli: 一個(gè)用于壓縮CSS并刪除CSS中不被使用的部分的工具，有助于大幅減少CSS文件尺寸；

• autoprefixer: 一個(gè)PostCSS 插件；

配置PostCSS

在項(xiàng)目的根目錄下，創(chuàng)建postcss.config.js文件：

module.exports?=?{plugins:?{tailwindcss:?{},autoprefixer:?{},} }

配置Tailwind

執(zhí)行下面的命令，創(chuàng)建Tailwind的配置文件：

npx?tailwindcss?init

接著，修改wwwroot文件夾中的app.css文件內(nèi)容，指定導(dǎo)入哪些Tailwind庫(kù)：

@tailwind?base; @tailwind?components; @tailwind?utilities;#blazor-error-ui?{background:?lightyellow;bottom:?0;box-shadow:?0?-1px?2px?rgba(0,?0,?0,?0.2);display:?none;left:?0;padding:?0.6rem?1.25rem?0.7rem?1.25rem;position:?fixed;width:?100%;z-index:?1000; }#blazor-error-ui?.dismiss?{cursor:?pointer;position:?absolute;right:?0.75rem;top:?0.5rem; }

頂部的三行是我們需要添加的全部?jī)?nèi)容，后面部分是保留默認(rèn)項(xiàng)目模板中Blazor錯(cuò)誤消息的樣式。

生成CSS

修改package.json文件，將“scripts”節(jié)修改成如下內(nèi)容：

"scripts":?{"buildcss":?"postcss?wwwroot/css/app.css?-o?wwwroot/css/app.min.css" },

執(zhí)行下面的命令，生成CSS文件：

npm?run?buildcss

添加樣式表引用

最后，去掉項(xiàng)目原有的CSS引用，并將生成的CSS文件添加到Blazor應(yīng)用程序中：

<link?href="css/app.min.css"?rel="stylesheet"?/>

由于我們是WebAssembly項(xiàng)目，需要修改Index.html，如果你是Server項(xiàng)目，則需要修改_Host.cshml。

Blazor使用示例

現(xiàn)在，我們修改razor頁(yè)面的代碼如下：

<button?class="px-3?py-2?rounded-md?bg-blue-600?hover:bg-red-600?text-white">Primary</button>

?使用就是這么簡(jiǎn)單，我們不僅創(chuàng)建了按鈕，還輕松實(shí)現(xiàn)了hover動(dòng)畫(huà)。

結(jié)論

使用過(guò)后，感覺(jué)Tailwind和Blazor組件化開(kāi)發(fā)配合起來(lái)真是相得益彰，當(dāng)然這是后面的故事了。

如果你覺(jué)得這篇文章對(duì)你有所啟發(fā)，請(qǐng)關(guān)注我的個(gè)人公眾號(hào)”My IO“，記住我！

總結(jié)

以上是生活随笔為你收集整理的Hello Blazor：(2)集成Tailwind CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。