Blazor默認集成了bootstrap，對于我這種后端出身，對CSS一知半解的.NET開發人員來說，使用起來還是有一定難度的。

好不容易才學到點皮毛，結果前端人員居然告訴我，bootstrap已經過時了，現在主流都用Tailwind CSS。WTF!

好吧，要學就學主流的，Let's GO!

什么是 Tailwind CSS？

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

Tailwind是一個功能類優先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構建出任何設計。

用過bootstrap的都知道，bootstrap有很多定義好的組件樣式，如果只是開發一些后臺管理項目，對樣式沒有特定要求，用bootstrap就很方便；但是如果和UI設計規范要求不一致（我們的就是），使用起來就很不方便，因為你需要覆蓋大量已有的樣式。

而Tailwind不提供默認主題或任何預定義的UI組件，它帶有預設計的css類，可以在HTML自由組合這些類達到設計要求。例如按鈕可以這樣實現：

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

通過組合這些小的樣式類，我們可以生成復雜的自定義樣式而不用寫一行css代碼。

在這我就不介紹Tailwind的詳細功能了，相關資料，你可以到官方網站查看。

Blazor集成Tailwind

Tailwind官方文檔沒有Blazor如何集成的說明，雖然可以用CDN方式引入：

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

但是連官方都不推薦，因為CDN文件尺寸很大(73.2kB compressed, 3020.7kB raw)，會影響加載性能。

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

初始化

在命令行窗口下，進入Blazor項目的根目錄，執行下面命令（當然，你首先需要安裝Node.js和npm）：

npm?init

一路回車，最后會生成package.json文件。

安裝Tailwind及其依賴項

執行下面的命令進行安裝：

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

• tailwindcss: Tailwind CSS；

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

• autoprefixer: 一個PostCSS 插件；

配置PostCSS

在項目的根目錄下，創建postcss.config.js文件：

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

配置Tailwind

執行下面的命令，創建Tailwind的配置文件：

npx?tailwindcss?init

接著，修改wwwroot文件夾中的app.css文件內容，指定導入哪些Tailwind庫：

@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; }

頂部的三行是我們需要添加的全部內容，后面部分是保留默認項目模板中Blazor錯誤消息的樣式。

生成CSS

修改package.json文件，將“scripts”節修改成如下內容：

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

執行下面的命令，生成CSS文件：

npm?run?buildcss

添加樣式表引用

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

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

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

Blazor使用示例

現在，我們修改razor頁面的代碼如下：

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

?使用就是這么簡單，我們不僅創建了按鈕，還輕松實現了hover動畫。

結論

使用過后，感覺Tailwind和Blazor組件化開發配合起來真是相得益彰，當然這是后面的故事了。

如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“，記住我！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。