在 Blazor 中集成 Tailwind CSS

最新推荐文章于 2024-09-24 11:41:48 发布

0neKing2017

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量54

点赞数

分类专栏： C# 文章标签： css c#

原文链接：https://timdeschryver.dev/blog/integrating-tailwind-css-in-blazor#optimizing-the-ci-build

版权

C# 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果您正在浏览此页面，您可能已经熟悉 Tailwind CSS，这是一个实用优先的 CSS 框架，并且您希望将其集成到您的 Blazor 应用程序中。
因此，我不会浪费您的时间介绍 Tailwind CSS，而是直接进入正题。

Tailwind CSS 的安装和初始化

要开始使用，您需要安装 Tailwind CSS 包，最快的方法是使用带有 npm 的 Tailwind CLI（通过 npx）。

npx tailwindcss init

此命令在项目根目录中创建一个tailwind.config.js文件，其配置为空。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

为 Blazor 配置 Tailwind

在 tailwind.config.js 文件中，您可以根据需要配置 Tailwind CSS。
例如，您可以添加自定义颜色、字体或扩展默认主题。

重要的部分是 content 属性，它是 Tailwind CSS 应该扫描类的文件数组。
在 Blazor 应用程序中，您需要扫描 .razor 文件，也可以选择包含 .html 文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{razor,html}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS 部分

下一步是创建一个 CSS 文件，在其中导入 Tailwind CSS 构建块。
我建议在“Styles”文件夹中创建一个“tailwind.css”文件，但您可以自由选择任何其他位置和名称。

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

构建和提供 CSS

准备好 tailwind.config.js 文件和 Styles/tailwind.css 中的样式后，您现在可以运行 Tailwind CLI 来构建 CSS 文件，在其中将创建的文件作为输入传递并指定输出文件。
输出文件通常进入 wwwroot 文件夹，因此应用程序可以提供它。

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

运行此命令后，您应该在wwwroot文件夹中看到styles.css文件。
最后，将此 css 文件导入到您的App.blazor文件中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="output.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Tailwind CSS 优化

output.css 文件仅包含应用程序中使用的 tailwind 类。
这样，您可以保持 CSS 文件大小较小，并且仅包含所需的样式。

您可以通过将 tailwind 类添加到 Blazor 组件来查看此操作。
作为测试，您可以将以下 HTML 添加到您的主页。
结果应该是比平常更大、粗体和下划线的文本。

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

重新执行 tailwindcss 命令时，您应该会在 output.css 文件中看到一些更改。
使用的类 text-3xl、font-bold 和 underline 的样式现在应该包含在 output.css 文件中。

现在，当您运行 Blazor 应用程序时，您应该会看到应用于应用程序的 Tailwind CSS 样式。

改善开发体验

总是必须手动运行 tailwindcss 命令不是很方便。
您可以使用 watch 命令自动执行此过程，该命令会监视文件中的更改并自动重建 CSS 文件。

第一个选项是将 --watch 标志与 tailwindcss 命令一起使用，该命令每次文件更改时都会生成 CSS 文件。

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

这并不理想，因为您需要知道该命令并记住每次启动应用程序时都运行它。

更好的选择是在项目文件中添加一个构建目标，在编译应用程序之前运行 tailwindcss 命令。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <Target Name="Tailwind" BeforeTargets="Compile">
    <Exec Command="npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/styles.css" />
  </Target>
</Project>

唯一需要注意的是，这不能很好地与dotnet watch配合使用。
作为一种解决方法，请在没有热重载的情况下运行 watch 命令。

dotnet watch --no-hot-reload

dotnet watch 命令仅检测属于项目一部分的文件的更改。
如果要在 watch 命令中包含 tailwind.css 文件，则需要将其添加到项目文件中。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <Watch Include="./Styles/tailwind.css" Exclude="./wwwroot/**/*;obj\**\*;bin\**\*" />
  </ItemGroup>

  <Target Name="Tailwind" BeforeTargets="Compile">
    <Exec Command="npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/styles.css" />
  </Target>
</Project>

优化 (CI) 构建

在生产环境中，您理想情况下希望缩小 CSS 文件以减小文件大小。

Tailwind 使用 --minify 标志支持此功能，该标志会缩小生成的 CSS 文件。

要在发布配置中缩小 CSS 文件，您可以在项目文件中添加第二个构建目标。

通过使用 Condition 属性，您可以指定目标应仅在发布配置中运行。
使用这种方法，当您在发布模式下构建应用程序时（例如在 CI/CD 管道内），输出 CSS 文件会被缩小。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <Target Name="Tailwind" BeforeTargets="Compile">
    <Exec Command="npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/styles.css" />
  </Target>

  <Target Name="Tailwind" BeforeTargets="Compile" Condition="'$(Configuration)' == 'Debug'">
    <Exec Command="npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/tailwind.css --minify" />
  </Target>

  <Target Name="Tailwind" BeforeTargets="Compile" EnvironmentVariables="NODE_ENV=production" Condition="'$(Configuration)' == 'Release'">
    <Exec Command="npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/tailwind.css --minify" />
  </Target>
</Project>

结论

由于 Tailwind CLI，将 Tailwind CSS 集成到 Blazor 应用程序中非常简单。
在这篇文章中，我展示了如何使用 CLI 进行初始设置以及如何创建 CSS 文件。
我还分享了如何配置项目文件以使用构建目标自动化构建过程。
最后，我们学习了如何利用 minify 选项在生产环境中优化 CSS 文件。