前段時間，寫了一篇“Blazor如何集成Tailwind CSS”的文章。但是操作起來比較麻煩，又是命令行，又是要修改一大堆配置。

后來，我又找到一個更簡單的方法。

實現方式

新建Blazor項目，然后引用nuget包BamButz.MSBuild.TailwindCSS。

編輯項目文件，加入TailwindCSS生成操作：

<ItemGroup><TailwindCSS?Include="wwwroot/css/app.css"?/> </ItemGroup>

然后和上次的一樣，修改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; }

最后，直接編譯，你會發現app.min.css已經自動生成了，和原來的實現效果一樣。

同樣，你也可以在項目的根目錄下，創建tailwind.config.js文件定制app.min.css輸出內容：

module.exports?=?{purge:?[],darkMode:?false,?//?or?'media'?or?'class'theme:?{extend:?{},},variants:?{extend:?{},},plugins:?[], }

具體配置格式，可以參考官方文檔：https://tailwindcss.com/docs/configuration

結論

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

總結

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

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