Hello Blazor：集成Tailwind CSS

Posted 2021-08-01 dotNET跨平台

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