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“，记住我！
...)
