嘿！
如果您以前曾使用过大餐，那么您可能会知道，每个Blazor项目都配备了Bootstrap，可以直接开箱即用。 （除了新添加的空模板）

但是有时，Bootstrap看起来很无聊，并且很容易从英里之外识别出来，那么如果您想快速使用自定义的东西，该怎么办？好吧，我们可以轻松地为大型项目设置 tailwind CSS 。

快速注意：

出于这个特定目的，我们需要在机器上安装node.js，因此，如果没有，请确保在继续阅读之前先下载它。

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

让我们开始吧

对于本教程，我将使用一个空的大火项目，因此我们不必清洁恰好带有主模板的样板。

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

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

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

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

命令完成安装过程后，将出现一个新文件，称为 tailwind.config.js 。

接下来，在根部创建一个名为样式的新文件夹，在其中，添加一个CSS文件，您可以随意称呼它，因为此演示，我将其称为< strong> tailwind.css 这是最有意义的。
将这些行添加到文件：

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

然后，我们需要告诉tailwind将使用哪些文件，因此请打开tailwind.config.js文件，然后更改 content属性值值：

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

这最终告诉tailwind，它应该注意所有。

好！现在是时候奔波了。
在您的终端窗口中，运行此命令：

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

这个命令很漫长，让我们看看它内部的路径。

./styles/tailwind.css是我们先前创建的文件良好的做法，可以将CSS文件保留在 wwwroot 文件夹中，或更具体地说，是 wwwroot 内的CSS文件夹。 - 末尾观看标志在那里表明我们希望尾风观察变化，而不必重新命令数百次，我们只是让Tailwind观看更新当我们保存我们的项目时，因此可以在浏览器中立即反映更改。

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

最后，我们需要将新样式表链接到主 index.html 文件，以便我们可以访问项目中任何地方的样式。因此，只需打开文件，添加链接标签，并指定路径，它应该看起来像这样：

测试时间

好吧，我们已经完成了设置，现在我们已经在项目中启动并运行了尾风，让我们转到主页文件， index.razor ，我添加了一些虚拟文本并附上了一些逆风类。

如果我现在运行该项目，则输出应与此相似：

这并不多，但至少足以证明所有内容都按预期工作，尝试添加一些类并保存项目，您应该在终端窗口中看到，每次进行更改并保存它时，Tailwind都在重新编译。

您现在知道如何使用tailwind css与jullazor
恭喜，您现在可以在您喜欢的任何大型项目中添加尾风，您可以构建看起来很棒的组件，而不必担心编写自己的CSS或使用更多 generic Bootstrap Design。

如果您想节省更多的时间，请查找 flowbite 之类的库，它们提供了一系列预先制作的尾风CSS组件，您可以将其复制并粘贴到您的项目中，它们看起来绝对是清洁，试一试，文档非常简单，很容易开始。

祝你好运！