angular !:
Or “Why I left Angular Material”
或“为什么我离开角材料”
If you are looking for an article on how to set up TailwindCSS with Angular, take a look at here, it’s the complete guide:
如果您正在寻找有关如何使用Angular设置TailwindCSS的文章，请看这里，它是完整的指南：
I would rather here focus on the reasons that led me to leave Angular Material and choose a low-level UI framework like TailwindCSS.
在这里，我宁愿关注导致我离开Angular Material并选择像TailwindCSS这样的低级UI框架的原因。
We are not going to compare a Component Library (Angular Material) and a styling only library (Tailwind), but HOW they manage CSS and the impact of this management for our project.
我们不会比较组件库(Angular Material)和仅样式库(Tailwind)，但是它们如何管理CSS以及该管理对项目的影响。
This article does not want to discredit Angular Material. This UI Framework has its reason for being and I will explain why at the end of the article, for the decision making of your future UI Framework.
本文不想抹黑角材料。 这个UI框架有其存在的原因，在本文结尾处，我将解释为什么要为将来的UI框架做出决策。
它是如何开始的？ (How it started ?)
In the early days of my career as a web developer consultant, I often looked at Bootstrap. I really liked the concept of utility-class first.
在作为Web开发人员顾问的职业生涯初期，我经常去看Bootstrap。 我真的很喜欢实用程序类的概念。
However, I didn’t have much experience in design, UI, UX, … All of these were pretty obscure to me.
但是，我在设计，UI，UX等方面没有太多经验，所有这些对我来说都是晦涩难懂的。
One day, a web designer called me up during my work and said: “Do you use Bootstrap? This utility-class first trend is really nonsense, and it is ugly! Believe me, we must follow the new recommendations, such as Material Design!”
有一天，一位网页设计师在工作期间给我打电话，说：“您使用Bootstrap吗？ 实用程序类的第一趋势确实是胡说八道，而且是丑陋的！ 相信我，我们必须遵循新的建议，例如材料设计！”
Being a Junior at the time, I found it normal to listen to the advice of this colleague who had many years of experience behind him ...
当时还是大三，我觉得听这位同事多年的经验是很正常的……
发现角材料 (Discovering Angular Material)
So I started to use the components created by the Angular team. And the least we can say is that the development was faster.
因此，我开始使用Angular团队创建的组件。 我们至少可以说的是，开发速度更快。
If you’ve seen my previous posts, you’ll see that I’ve gone far enough into this UI framework to find out what’s behind it. Management of themes, customization of the different elements such as the MatTable, …
如果您看过我以前的文章，那么您会发现我已经深入到这个UI框架中来找出其背后的原因。 主题管理，自定义不同元素(例如MatTable，…)
Despite the many benefits of Material that you are familiar with, we are gradually facing customization problems, and the difficulties to obtain a design close to us are piling up …
尽管您熟悉Material的许多好处，但是我们逐渐面临定制问题，并且获得接近我们的设计的困难正在堆积……
噩梦的开始😰 (The start of the nightmare 😰)
为什么使用Material定制组件变得越来越困难？ (Why is it becoming difficult to customize the components with Material ?)
In general, it’s not that big a problem. Angular Material provides a superb theming system that you can use throughout your application. It is quite easy to change the colors of your components.
总的来说，这不是什么大问题。 Angular Material提供了一个出色的主题系统，您可以在整个应用程序中使用它。 更改组件的颜色非常容易。
But things get tough when you have to change small details in a component.
但是，当您必须更改组件中的小细节时，事情变得很艰难。
the devil is in the details
细节决定成败
Two ways are available to us:
有两种方法可供我们使用：
- Place your CSS in the root styles of your application 将CSS置于应用程序的根样式中
in the component’s CSS. However, this approach can become problematic if that same component has dynamic elements that come later … forcing you to use tricks like
::ng-deep.在组件CSS中。 但是，如果同一组件具有稍后会出现的动态元素，则此方法可能会出现问题…迫使您使用
::ng-deep类的技巧。
包尺寸size (The bundle size 📦)
Let’s take a look at the bundle size!
让我们看一下捆绑包的大小！
The Material and Tailwind approaches are completely different! One will style the components according to a guideline, and the other allows you to use a set of utility classes to create your own components.
Material和Tailwind方法完全不同！ 一个将根据准则对组件进行样式设置，另一个允许您使用一组实用程序类来创建自己的组件。
Let’s start by creating a new, blank project, and test each UI framework to compare them.
让我们从创建一个新的空白项目开始，并测试每个UI框架以进行比较。
As you can see, the difference is simply huge. For the development part, Material has a very light size compared to TailwindCSS. And the reason is quite simple: styling each component independently, the size is quite small. in theory.
正如您所看到的，区别只是巨大的。 对于开发部分，与TailwindCSS相比，Material的尺寸非常轻。 原因很简单：独立设计每个组件的样式，尺寸很小。 理论上。
However, if TailwindCSS can seem very heavy, it is only because it is very rich. And fortunately for us, we are not going to exploit all this wealth! We take what we need, sometimes based on customer demand.
但是，如果TailwindCSS看起来非常沉重，那仅仅是因为它非常丰富。 对我们来说幸运的是，我们不会利用所有这些财富！ 我们根据需要，有时根据客户需求来满足需求。
And TailwindCSS’s approach to production is a clear winner. It is difficult to exceed 10kb as explained by the creators of TailwindCSS. Different optimization techniques are even explained. A small bundle size results in a faster web page loading.
TailwindCSS的生产方法无疑是赢家。 正如TailwindCSS的创建者所解释的，很难超过10kb。 甚至说明了不同的优化技术。 较小的捆绑包大小可加快网页加载速度。
You win a point, Tailwind! 👍
你赢了一点，尾风！ 👍
关键渲染路径？ (Critical Rendering Path ?)
Never heard about the CRP ? Still, this kind of concept should be known to us frontend developers. (Don’t worry, I only found out by chance … two years ago?)
从未听说过CRP吗？ 尽管如此，前端开发人员还是应该知道这种概念。 (不用担心，我是两年前偶然发现的？)
Usually, we call the critical rendering path the computation time of the DOM rendering.Whenever there is a CSS modification for a DOM element, the step of calculating the CSSOM (yes, it exists) will repeat itself until the element is rendered. And it does this for every element of your DOM … Each new calculation of this CSSOM will lead to what is called a Render-blocking CSS. Using Lighthouse, you have surely already seen this point appear in red, which is not a good sign …
通常，我们将关键渲染路径称为DOM渲染的计算时间。每当对DOM元素进行CSS修改时，计算CSSOM的步骤(是的，它存在)将重复进行直到该元素被渲染。 并且它对DOM的每个元素都执行此操作…对CSSOM的每次新计算都将导致所谓的Render-blocking CSS 。 使用Lighthouse，您肯定已经看到此点显示为红色，这不是一个好兆头……
Optimizing this path will increase the speed of the first render of your web page!
优化此路径将提高您的网页首次渲染的速度！
As in our code, we are going to use a utility class set, it will be easier for us to see the elements that we are rewriting without realizing it. A quick glance in the Chrome Inspector (or whatever browser you use every day) will allow you to quickly find where the CSS has been rewritten, and therefore optimize the rendering calculation of the CSSOM.
就像在代码中一样，我们将使用实用程序类集，这将使我们更容易地看到要重写的元素，而无需意识到。 快速浏览Chrome Inspector(或每天使用的任何浏览器)将使您能够快速找到CSS的重写位置，从而优化CSSOM的渲染计算。
For the case of Angular Material, you will already have a set of classes with well-defined names for each component. You will want to rewrite a part to make it conform to your design idea. This rewriting leads to recompute the CSSOM.
对于Angular Material，您将已经具有一组类，每个类的名称都有明确定义。 您将需要重写零件以使其符合您的设计思想。 此重写导致重新计算CSSOM。
Useful links at the end of this article.
本文结尾处的有用链接。
灯塔Lighthouse的例子 (An example with Lighthouse 🔬)
To give Tailwind and Material the same chances, I took the same assets. These two examples are taken from their respective official website.Still following everyone’s documentation, I prepared a setup for production.When I serve the files with the production config, this is what the console gives me as output:
为了使Tailwind和Material拥有相同的机会，我采取了相同的资产。 这两个例子取自各自的官方网站，仍然遵循每个人的文档，为生产准备了一个安装程序，当我将文件与生产配置一起提供时，这就是控制台向我输出的内容：
And… The final results!
还有……最终结果！
As we can see, with a small example, Tailwind gives better results for performance! We can see that Tailwind is able to give a performance twice as superior to Material! 🚀
我们可以看到，通过一个小例子，Tailwind可以提供更好的性能结果！ 我们可以看到，Tailwind的性能是Material的两倍！ 🚀
原子CSS或预定义的准则？ 🤔 (Atomic CSS or a predefined guideline ? 🤔)
Here is the true question of this article: Should you prefer to use the concepts of Atomic CSS (Utility-Classes) or follow the guidelines of Material?
这是本文的真正问题：您是否更喜欢使用Atomic CSS(实用程序类)的概念或遵循Material的准则？
It depends on what you want to accomplish.
这取决于您要完成的工作。
If your client likes the way Material Design works, then take it and use Angular Material with eyes closed.If, on the contrary, the design deviates from this guideline, and you need an application with a very specific look and feel, give TailwindCSS a chance. Also, if you like Angular Material components, you can very well use the @angular/cdk
如果您的客户喜欢Material Design的工作方式，请闭上眼睛并使用Angular Material;相反，如果设计偏离了本指南，并且您需要外观和感觉非常特殊的应用程序，请给TailwindCSS a机会。 另外，如果您喜欢Angular Material组件，则可以很好地使用@angular/cdk
尾注✏️ (End note ✏️)
Take a look at all the articles about Atomic CSS. This approach to CSS can bring many benefits, and will definitely change the way you code. Kind of like when you get to Angular and learn RxJS.
看一下有关Atomic CSS的所有文章。 这种CSS方法可以带来很多好处，并且肯定会改变您的编码方式。 有点像当您进入Angular学习RxJS时。
In a future article, I will explain how to properly configure your Angular application in order to take advantage of this enormous potential that is Tailwind. Stay tuned!
在以后的文章中，我将解释如何正确配置Angular应用程序，以便利用Tailwind的巨大潜力。 敬请关注！
EDIT: The article for the setup is live
编辑： 安装程序的文章是实时的
TailwindCSS的有用链接 (Useful Links for TailwindCSS 🔗)
The complete guide to configure Tailwind in an Angular Application:https://medium.com/swlh/angular-configure-tailwindcss-6816f7cc6f8e
在Angular应用程序中配置Tailwind的完整指南： https : //medium.com/swlh/angular-configure-tailwindcss-6816f7cc6f8e
Interesting resources:https://tailwindcss.com/resources
有趣的资源： https ： //tailwindcss.com/resources
List of articles concerning the Atomic CSS Approach: https://johnpolacek.github.io/the-case-for-atomic-css/
有关Atomic CSS方法的文章列表： https : //johnpolacek.github.io/the-case-for-atomic-css/
For more info about Critical Path Rendering, I invite you to watch this free course on Udacity.https://classroom.udacity.com/courses/ud884
有关关键路径渲染的更多信息，我邀请您观看有关Udacity的免费课程。 https://classroom.udacity.com/courses/ud884
Interesting discussion about Angular and Render-blocking CSS:
关于Angular和Render-blocking CSS的有趣讨论：
Interesting discussion about Angular and Render-blocking CSS:https://github.com/angular/angular-cli/issues/17764
关于Angular和Render-blocking CSS的有趣讨论： https : //github.com/angular/angular-cli/issues/17764
⭐️ TailwindCSS Awesome: https://github.com/aniftyco/awesome-tailwindcss
⭐️TailwindCSS很棒： https ： //github.com/aniftyco/awesome-tailwindcss
翻译自: https://levelup.gitconnected.com/tailwindcss-and-angular-its-a-match-7bf68c15fc54
angular !:
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
