前段时间，写了一篇“​​Blazor如何集成Tailwind CSS​​”的文章。但是操作起来比较麻烦，又是命令行，又是要修改一大堆配置。

后来，我又找到一个更简单的方法。

实现方式

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

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式 #yyds干货盘点#_公众号

编辑项目文件，加入​​TailwindCSS​​生成操作：

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

Hello Blazor：(2)集成Tailwind CSS续——nuget包方式 #yyds干货盘点#_自动生成_02

然后和上次的一样，修改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包方式 #yyds干货盘点#_公众号_03