将 Tailwind CSS 与 .NET Blazor 结合使用

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

嗨！
如果您之前使用过 Blazor，那么您可能知道每个 Blazor 项目都默认配备了 Bootstrap。（除了新添加的空白模板）

但有时候，Bootstrap 看起来确实很单调，而且一眼就能认出来，那么如果你想使用自定义但又快捷的框架该怎么办呢？其实，我们可以轻松地为 Blazor 项目配置Tailwind CSS 。

简要说明：

为此，我们需要在机器上安装 Node.js，所以如果您还没有安装，请确保在继续阅读之前先下载它。

如果您不确定它是否已安装在您的设备上，请打开终端窗口，然后输入以下命令：
npm -v
如果已安装，终端将显示您当前正在运行的版本。

让我们开始吧

在本教程中，我将使用一个空的 Blazor 项目，这样我们就无需清理主模板自带的样板代码。

在您想要创建项目的目录中，打开一个新的终端窗口，并运行以下命令来创建空项目：
dotnet new blazorwasm-empty -o BlazorWithTailwind

此命令将在名为 BlazorWithTailwind 的新目录中生成一个新项目。

使用您喜欢的文本编辑器打开项目。

现在，在终端中，导航到新建项目的根目录，然后输入以下命令：
npx tailwindcss init

安装过程完成后，根目录中将出现一个名为tailwind.config.js的新文件。

接下来，在根目录下创建一个名为Styles的新文件夹，并在其中添加一个 CSS 文件。你可以随意命名，为了方便演示，我将其命名为tailwind.css
。 将以下代码添加到该文件中：

@tailwind base;
@tailwind components;
@tailwind utilities;

接下来我们需要告诉 Tailwind 它将在哪些文件中使用，所以打开 tailwind.config.js 文件，并将content 属性值更改为以下内容：

content: ['./**/*.{razor,html}']

这最终告诉 Tailwind，它应该监视所有.razor和.html文件中的更改。

好了！现在该运行 Tailwind 了。
在终端窗口中，运行以下命令：

npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/css/tailwind.css --watch

这条命令很长，我们只看一下它里面的路径。

`./Styles/tailwind.css` 是我们之前使用Tailwind 目录创建的文件， `-o`后面的路径指定了输出文件。最佳实践是将 CSS 文件放在wwwroot文件夹内，更具体地说，放在wwwroot 文件夹内的 CSS 文件夹中。最后的`--watch`标志表示我们希望 Tailwind 实时监听更改，这样就无需重复运行数百次相同的命令。我们只需让 Tailwind 在保存项目时监听更新，即可使更改立即反映在浏览器中。

运行命令后，如果您打开在 /wwwroot/css 中创建的新tailwind.css文件，您应该会看到其中已经写入了一些样式，实际上还不少，当您使用实际上不在该文件中的 Tailwind 类时，此文件将会更新。

最后，我们需要将新的样式表链接到主index.html文件，以便在项目的任何位置都能访问其中的样式。只需打开该文件，添加一个link标签，并指定路径，它应该看起来像这样：

是时候测试了

好了，我们已经完成了设置，现在 Tailwind 已经在我们的项目中运行了，让我们转到首页文件Index.razor，我已经添加了一些示例文本并附加了一些 Tailwind 类。

如果我现在运行该项目，输出结果应该类似于这样：

虽然不多，但至少足以证明一切都在按预期运行。尝试添加一些类并保存项目，您应该会在终端窗口中看到，每次您进行更改并保存时，Tailwind 都会重新编译。

您现在知道如何将 Tailwind CSS 与 Blazor 一起使用了。
恭喜！您现在可以将 Tailwind 添加到任何您喜欢的 Blazor 项目中，您可以构建外观精美的组件，而无需担心编写自己的 CSS 或使用更通用的Bootstrap 设计。

如果你想节省更多时间，可以看看像Flowbite这样的库，它们提供了一系列预制的 Tailwind CSS 组件，你可以直接复制粘贴到你的项目中，而且它们看起来非常简洁，不妨试试看，它们的文档非常直观易懂，很容易上手。

祝你好运！