Laravel11顺风CSS的优点

近两年来，我几乎每天都在专业地使用Tailwind CSS。我喜欢使用它，它让我的开发流程变得更好。所以我想分享一下我在传统框架或自定义CSS上使用Tailwind所获得的一些好处。。它附带了一个默认配置，但是在项目中用一个tailwind.config.js文件覆盖默认配置很简单。从颜色到间距大小和字体，都可以使用配置文件非常轻松地进行自定义。无需再与框架抗争，尝试找出要覆盖哪些类以获得所需结果。请在此处阅读有关自定义Tailwind的更多信息。 1. 内置设计系统配置文件的另一个好处是，它为您提供了一个可供使用的设计系统。在大多数情况下，如果使用一致的间距、大小、颜色等，设计看起来会更好。因为Tailwind允许您预先配置所有这些值（或提供合理的默认值），只要您坚持使用Tailwind类，在设计系统上，你有一个很好的开端。。哪些类应该是特定的？哪些类应该更通用？如何组织它们并确保它们以正确的顺序层叠？Tailwind通过提供99%的时间都可以使用的实用程序类解决了所有这些问题。唯一需要命名的时间是提取组件时，这对我来说非常罕见。 1. 无上下文切换使用Tailwind更快的原因之一是几乎不需要切换上下文。由于框架提供了几乎所有您需要的现成的东西，所以在构建设计时很少离开您的HTML（或其他模板语言）。不再从HTML转换到CSS数百次，以使设计看起来恰到好处。。因此，如果开发人员完全熟悉Tailwind，那么他们很有可能会轻而易举地投入到一个新的Tailwind项目中。。在几乎每个项目中，我都使用@apply指令为按钮和其他表单元素提取组件类。您还可以在CSS文件中使用theme()函数从配置文件中获取颜色和间距大小等值，而不必硬编码。请在此处阅读有关提取组件的更多信息。 1. 开发速度，而且你不必为了定制而与框架抗争，使用Tailwind原型和实现定制设计真的很快。比大多数其他CSS框架要快得多，而且肯定比编写自定义CSS要快。Tailwind提供了构建站点所需的几乎所有工具，因此很少需要编写任何自定义CSS。如果你喜欢像.btn和.panel这样的组件，你可以很容易地自己创建它们，以便在整个项目中使用。Responsive EverywhereTailwind的所有实用程序都是用响应版本生成的，你可以使用这些版本使你的网站在移动、平板和桌面屏幕大小上看起来不同。除此之外，它还提供了@screen和@responsive指令来帮助生成响应的自定义类。请在此处阅读更多有关Tailwind响应性的信息。小大小（在purgescs之后）最初，当您看到Tailwind输出的CSS文件时，您可能会对大文件大小（477.6kb未完成）感到震惊。谢天谢地，有一些东西可以极大地减少文件大小。一个你可能免费得到的优化是Gzip或Brotli压缩。由于构建Tailwind的方式，这些压缩算法比通常减少了更多的文件大小。大多数服务器都默认启用了一个或两个。第二个也是最有益的优化是使用PurgeCss。PurgeCss通过扫描HTML或其他模板并删除任何未使用的类来减小文件大小。将PurgeCss设置为与Tailwind一起工作很容易，所以我强烈建议在部署站点之前使用它。根据我的经验，在使用Brotli和PurgeCss之后，您可以期望拥有低于10kb的CSS文件，除非您正在向项目中添加大量自定义CSS。通常随着项目的增长，CSS文件也会增长。这不是使用顺风时的情况。因为您使用的是一组标准化的类，所以在整个li中，您的CSS文件将保持较小的大小如果使用传统的CSS框架或自定义CSS，则在更改设计时很可能需要对CSS文件进行更改。但是，当使用Tailwind时，由于您在标记中反复使用相同的类，而不是更改CSS文件，因此您甚至可能不必破坏CSS缓存来对设计进行小的更改。这意味着您的用户不必像以前那样频繁地重新下载您的CSS文件。。使用Tailwind，您所做的任何更改都将在模板中进行，因此只会影响您正在处理的页面。这使得更改一个页面变得更容易，而不必担心可能引起的副作用。结论如果这些好处听起来像是你感兴趣的东西，一定要尝试一下Tailwind。我建议您先阅读文档并观看Tailwind屏幕广播，然后开始使用。如果您已经在使用Tailwind，请告诉我您喜欢或讨厌它的地方。我很想听到一些反馈！ 2. Responsive Everywhere 3. 小大小（在purgescs之后） 4. 最初，当您看到Tailwind输出的CSS文件时，您可能会对大文件大小（477.6kb未完成）感到震惊。谢天谢地，有一些东西可以极大地减少文件大小。一个你可能免费得到的优化是Gzip或Brotli压缩。由于构建Tailwind的方式，这些压缩算法比通常减少了更多的文件大小。大多数服务器都默认启用了一个或两个。第二个也是最有益的优化是使用PurgeCss。PurgeCss通过扫描HTML或其他模板并删除任何未使用的类来减小文件大小。将PurgeCss设置为与Tailwind一起工作很容易，所以我强烈建议在部署站点之前使用它。根据我的经验，在使用Brotli和PurgeCss之后，您可以期望拥有低于10kb的CSS文件，除非您正在向项目中添加大量自定义CSS。通常随着项目的增长，CSS文件也会增长。这不是使用顺风时的情况。因为您使用的是一组标准化的类，所以在整个li中，您的CSS文件将保持较小的大小如果使用传统的CSS框架或自定义CSS，则在更改设计时很可能需要对CSS文件进行更改。但是，当使用Tailwind时，由于您在标记中反复使用相同的类，而不是更改CSS文件，因此您甚至可能不必破坏CSS缓存来对设计进行小的更改。这意味着您的用户不必像以前那样频繁地重新下载您的CSS文件。。使用Tailwind，您所做的任何更改都将在模板中进行，因此只会影响您正在处理的页面。这使得更改一个页面变得更容易，而不必担心可能引起的副作用。结论如果这些好处听起来像是你感兴趣的东西，一定要尝试一下Tailwind。我建议您先阅读文档并观看Tailwind屏幕广播，然后开始使用。如果您已经在使用Tailwind，请告诉我您喜欢或讨厌它的地方。我很想听到一些反馈！

Laravel11顺风CSS的优点

CSS无头WordPress到底有多合适？

CSS制作带有粘性页眉和页脚的表格变得更容易了

CSS技巧编年史XXXX

CSS使用子资源完整性保护您的网站

CSS联合的可能性

CSS在开放细节元素上添加背景

CSS容器查询的聚宝盆

CSS target=blank

CSS查看WCAG 2.5.5以获得更好的目标尺寸

CSS Trickz：Netlify随需应变构建器的实验