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

后來(lái)，我又找到一個(gè)更簡(jiǎn)單的方法。

實(shí)現(xiàn)方式

新建Blazor項(xiàng)目，然后引用nuget包BamButz.MSBuild.TailwindCSS。

編輯項(xiàng)目文件，加入TailwindCSS生成操作：

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

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

最后，直接編譯，你會(huì)發(fā)現(xiàn)app.min.css已經(jīng)自動(dòng)生成了，和原來(lái)的實(shí)現(xiàn)效果一樣。

同樣，你也可以在項(xiàng)目的根目錄下，創(chuàng)建tailwind.config.js文件定制app.min.css輸出內(nèi)容：

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

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

結(jié)論

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

總結(jié)

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

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