郝 玉华

郝 玉华

1659788700

将 Tailwind CSS 与 Blazor 集成

在本文中,我们将把 Tailwind CSS 与 Blazor 应用程序集成。这是一个专门为像我这样的 .NET 开发人员提供的指南,他们对 CSS 不太了解,但想要构建看起来干净的 UI。我们将开始使用您已经拥有的 CSS 知识的一半(甚至不到一半)来构建出色的 UI 组件。你可以在这里找到实现的源代码。

相信我,我发现有时将按钮或元素居中放在一个 div 中会让人感到困惑。尽管 Blazor 声称将开发人员从 JS 中解放出来,但 CSS 仍然占据了一半的时间,除非您有专门的 UI 团队。我将向您介绍一个很棒的 CSS 框架,它对我们来说非常有意义并且生活更轻松。TailwindCSS – 使构建优雅组件变得更容易和更智能的框架。

什么是顺风 CSS?

Tailwind CSS是一个实用程序优先的 CSS 框架,即使不留下 HTML 代码,您也可以构建美观的网站。这意味着您可以通过在 HTML 对象定义中使用预构建的 CSS 类来获得很酷的外观。CSS 类名第一次真正有意义。下面是 Tailwind CSS 实际可以做的一个小例子:

图 9 将 Tailwind CSS 与 Blazor 集成 - 详细指南

上面的屏幕截图说明了可以将 HTML 元素作为类应用的各种类型的预构建阴影。当您使用其他框架(如 Bootstrap、Bulma 等)时​​,您将需要比这更多的代码。明白我的意思吗?乍一看,这很甜蜜。Tailwind CSS 涵盖了各种其他方面,例如边框、悬停/焦点状态、排版、字体粗细,以及您真正需要的一切。这是另一个使用 Tailwind CSS 设置字体粗细的示例。

图 10 将 Tailwind CSS 与 Blazor 集成 - 详细指南

有用,是吗?这就是我认为将为Blazor制作一个很酷的 UI 框架的方法。带有 TailwindCSS 的 Blazor 意味着您无需处理 JS,而是以更智能的方式处理 CSS。在学习如何将 Tailwind CSS 与 Blazor 集成之前,让我们看一个关于如何使用 Tailwind CSS 构建组件的小演示。这是 TailwindCSS 的 Playground,您可以在其中构建快速原型 - Tailwind CSS Playground

图 11 将 Tailwind CSS 与 Blazor 集成 - 详细指南

您可以在此处找到一些预构建的组件 – https://tailwindui.com/components

入门:将 Tailwind CSS 与 Blazor 集成

既然我们已经看到了 Tailwind CSS 可以实现的出色和灵活性,那么将 Tailwind CSS 与 Blazor 集成以简化 C# 开发人员的生活是否有意义?特别是对于像我这样对 CSS 和其他东西一无所知的人!到目前为止,让 Tailwind CSS 与 Blazor 一起运行需要大量的一次性工作,因为它需要安装 npm、某些包、配置构建时事件等等。尽管这些术语在开始时可能听起来很忙,但很容易克服并享受在 Blazor 中使用 Tailwind CSS 的快速开发体验。

或者,还有另一种将 TailwindCSS 与 Blazor 集成的方法。就像将 CSS CDN 引用添加到 Blazor 应用程序的 _Host 或索引页面一样简单。尽管这是一种快速且相当简单的方法,但这种方法存在一定的局限性。主要问题是引用 CSS 将是巨大的,这对于生产环境来说不是很理想,并且灵活性/功能也大大降低了。因此,我们将采用更难的方式将 Tailwind CSS 与 Blazor 集成(虽然并不难)。

让我们开始创建一个新的 Blazor 服务器项目。您也可以使用 WASM 项目。

图 12 将 Tailwind CSS 与 Blazor 集成 - 详细指南

创建一个 npm 项目

确保你的机器上安装了 Node.js 和 npm CLI 工具。你可以从这里得到它。完成后,打开 Blazor 项目的根目录。在这里,打开命令提示符/cli/windows shell 并输入以下命令。

npm init

这会在 Blazor 的根目录中创建一个新的 package.json 文件。这是您新创建的 JSON 文件。这背后的想法是,我们将通过 npm 将 tailwindcss 添加为一个包以及某些其他库。

devenv pvePvRKqb3 将 Tailwind CSS 与 Blazor 集成 - 详细指南

添加 Tailwind CSS 和其他包

在终端中,运行以下命令。这会为您安装几个软件包。

tailwindcss: tailwind CSS
autoprefixer的最新版本: postcss包的一部分。
postcss & cli : 一个很酷的压缩 CSS 和删除未使用的 CSS 部分的工具。有助于大幅减少 CSS 文件,尤其是超过 500Kb 的 TailwindCSS。

npm install tailwindcss postcss autoprefixer postcss-cli

chrome 1LOhvIeQMZ 将 Tailwind CSS 与 Blazor 集成 - 详细指南

配置 PostCSS

如前所述,POSTCSS 将负责将 tailwind.css 转换为您自己的版本。在项目的根目录下新建一个 JS 文件,命名为postcss.config.js

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

配置 Tailwind CSS

接下来,要添加 Tailwind 配置文件,让我们在应用程序根文件夹中的终端中运行以下命令:

npx tailwindcss init

这将为您创建一个 tailwind.config.js 文件。

const colors = require('tailwindcss/colors');
module.exports = {
purge: [],
darkMode: false,
theme:[],
variants: {
extend: {},
},
plugins: [],
}

在 wwwroot 文件夹中添加一个新的 CSS 文件并将其命名为 app.css。(你可以给它起任何名字)。这就是 POSTCSS 将用来生成您网站的 CSS 资源的内容。在这里,我们将从 tailwind CSS 库添加导入。

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

使用 PostCSS CLI 构建 CSS

现在,我们需要构建一个可以自动化 postcss 处理的脚本。将突出显示的行添加到您的 package.json 文件中。这个脚本/命令的作用很简单——它将 app.css 作为输入,并在同一路径中生成一个 app.min.css 文件。新生成的文件包含完整的 tailwindcss 内容。

{
"name": "blazorwithtailwindcss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"buildcss": "postcss wwwroot/css/app.css -o wwwroot/css/app.min.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.3"
}
}

完成后,打开终端并运行以下命令。

npm run buildcss

图 13 将 Tailwind CSS 与 Blazor 集成 - 详细指南

这将在您的根目录中生成一个 app.min.css 文件。您会注意到所有 TailwindCSS 样式都是在此处生成的。

devenv GHnxfOnnve 将 Tailwind CSS 与 Blazor 集成 - 详细指南

删除未使用的 CSS

你为什么需要这个?很简单,节省客户端的带宽使用。让我向您展示 Tailwind CSS 在未优化的情况下使用了多少带宽。

chrome HHG6klk0FN 将 Tailwind CSS 与 Blazor 集成 - 详细指南

这是一个 500+ kB 的数据,必须在客户端上传递。是否适合生产?完全没有。这是一种简单的方法,您可以通过它从 app.min.cs 中删除所有未使用的 CSS 内容并节省带宽。

打开您的 tailwind.config.js 并修改它以匹配以下内容。

const colors = require('tailwindcss/colors');
module.exports = {
purge: {
enabled: true,
content: [
'./**/*.html',
'./**/*.razor'
],
},
darkMode: false,
variants: {
extend: {},
},
plugins: [],
}

PS,确保每次更改任何相关的 js 或 CSS 文件时都运行npm run buildcss命令。(在下一节中,我们将讨论可以在每次构建或重建项目时自动运行 npm 命令的构建后事件。)

chrome bGci6GbpZf 将 Tailwind CSS 与 Blazor 集成 - 详细指南

配置构建后事件

这是让 Visual Studio 在构建/重建项目后立即运行 NPM 构建命令的简单方法。当您对 app.css 甚至 tailwind.css 进行一些更改并且不喜欢每次都运行 npm 命令时,这将派上用场。

打开您的解决方案文件并粘贴以下突出显示的代码段。这确保了 dotnet 构建系统在构建项目后运行 npm 命令。

<Project Sdk="Microsoft.NET.Sdk.Web">
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="npm run buildcss" />
</Target>
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
</Project>

这是我在构建 Blazor 应用程序时看到的。

devenv BLdXnlULBw 将 Tailwind CSS 与 Blazor 集成 - 详细指南

添加样式表引用

最后,将生成的 CSS 文件的引用添加到 Blazor 应用程序。由于我们有服务器项目,您可能希望将以下代码段添加到_Host.cshml文件中。如果您在 WebAssembly 项目中,Index.html 是您需要添加以下内容的地方。

<link href="~/css/app.min.css" rel="stylesheet" />

PS,为了演示,我删除了对 Blazor 开箱即用的现有样式表的所有引用,以使项目完全使用 TailwindCSS。

Blazor 英雄 - 横幅

介绍 Blazor 英雄!

Blazor Hero – 使用 MudBlazor 组件为 Blazor WebAssembly 构建的干净架构模板。只需运行一行 CLI 命令即可开始生成出色的 Blazor 项目!

开始使用

带有 Blazor 的 Tailwind CSS:演示

至于开始,让我们创建几个按钮。这是一个示例代码。很不言自明,是吗?

@page "/"
<div class="bg-gray-50">
<div class="mx-auto py-12 px-4">
<div class="mt-8 flex">
<button class="bg-gray-500 hover:bg-purple-600 p-4 shadow-md rounded-md text-white m-10">
Download
</button>
<button class="bg-gray-500 hover:bg-red-600 p-4 shadow-md rounded-md text-white m-10">
Visit
</button>
</div>
</div>
</div>

将 Tailwind CSS 与 Blazor 集成 - 详细指南

创建酷炫简单的按钮就是这么容易(当然,也要把它们带到中心!😛)。至于高级的东西,在下面的屏幕截图中。您可以在此处找到其他预构建组件 – https://tailwindui.com/components

图 15 将 Tailwind CSS 与 Blazor 集成 - 详细指南

概括

在本文中,我们了解了如何实现 将 Tailwind CSS 与 Blazor 集成您可以在此处找到完整实现的源代码 。如果您喜欢本文,请确保与您的同事和 Blazor 开发人员分享。这有助于我接触到更广泛的受众,并保持定期制作更多内容的动力。

在下面的评论部分留下您宝贵的疑问和建议。此外,如果您认为您从本文中学到了一些新东西,请不要忘记在您的开发人员社区中分享。快乐编码!

来源:https ://codewithmukesh.com/blog/integrating-tailwind-css-with-blazor/

#tailwindcss #blazor

What is GEEK

Buddha Community

将 Tailwind CSS 与 Blazor 集成

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor in c# #blazor tutorial #blazor webassembly #blazor crud #blazor with asp.net core

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor crud #blazor api #blazor with asp.net core #blazor in c#

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

  • Introducing Tailwind CSS
  • Adding Tailwind CSS to your project via a package manager
  • Creating the configuration file and process your CSS with Tailwind
  • Building a responsive hero section using the utility-first classes from Tailwind
  • Customize fonts, colors and add extra classes using the configuration file
  • Reduce loading time and file size by purging the unused classes from your CSS
  • Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source