2024年值得尝试Tailwind CSS吗?
2024年值得尝试Tailwind CSS吗？- 探索新一代CSS框架的最佳时机？
本文最初发布在.cult上，作者是Luis Minvielle。.cult是一个位于柏林的开发者社区平台。我们写有关职业发展的所有内容、制作原创纪录片，并分享来自世界各地的无数其他未被讲述的开发者故事。
最终能够做自己喜欢的工作——编码——的开发者们常常面临着一个难题：尽管编写CSS被认为很有趣，但是一遍又一遍地重复同样的任务是否也同样令人愉悦呢？因为我们明白：写CSS可能很有趣，但是试着重复做它吧。
幸运的是，网页开发者们不断推出一些工具和框架，让日常任务变得不那么头疼。最近受到极大关注的一个工具包就是Tailwind CSS。
Tailwind CSS采用一种构建用户界面的方法，它提供了一种实用优先的CSS框架，可以让您轻松样式化网站而无需编写自定义CSS代码。这个备受喜爱的开源GitHub项目提供了一组预先构建的实用类，您可以直接在HTML代码中应用这些类，以实现不同的样式和布局。这听起来很有希望，如果你想停止问自己是否一开始就热爱编码。
但是，在2024年试用它是否值得？让我们深入了解其细节，探索其特点、优势、劣势，并看一看它在今天的开发者中是否依然有效。
Tailwind CSS是什么？
Tailwind CSS是一个实用优先的CSS框架，为加快开发过程提供了一套全面的预先构建的类。与传统的带有预设计组件和样式的CSS框架不同，Tailwind CSS专注于提供小型、单一用途的实用类，这些类可以组合在一起创建自定义样式，提供了更大的灵活性和对网站外观的控制。在线上的Web设计师称其为一个偏向于快速UI开发的精简实用型CSS框架。
Tailwind CSS的团队仍在添加功能，并最近推出了其即时编译器（Just-In-Time，JIT）以实现超快的构建时间。这意味着这个工具包是一个时间节省器的两个方面：它将节省你的时间，也将节省屏幕背后的人的时间（而不会测试他们的耐心）。
开发者可以组合这些类来创建组件和布局。例如，您可以通过简单地向HTML元素中添加类来定义文本颜色、背景颜色、填充、外边距等等。这种模块化的方法使得您可以轻松调整和扩展设计，而无需编写自定义且重复的CSS代码（与Bootstrap相反，后者旨在在不同的项目中提供熟悉且一致的外观和感觉）。
谁在2023年使用Tailwind CSS？它适用于哪些场景？
尽管某些YouTube频道最近对这个框架进行了调侃，认为它过于做作，但Tailwind CSS绝不是一时的流行。在2023年，以下组织使用Tailwind CSS搭建网站：
- Der Spiegel
- OpenAI和ChatGPT（希望他们在这里获取到版税）
- Shopify
- Loom
- The ENBLE
- MrBeast’s Feastables微网站
- Microsoft .NET的营销网站（有点有趣）
此外，根据行业洞察，超过400家公司，其中一些甚至比上述名单更加注重技术，正在使用Tailwind CSS。不同公司的采用表明两点：首先，这个框架可以满足各种需求，从媒体网站到电子商务平台。其次，如此重量级的行业巨头的采用表明它具有一定的精度，可能并不适合初学者。从前端的角度来看，OpenAI使用它强调了Tailwind CSS在2023年的多功能性和受人尊重程度，但也暗示了一个更陡峭的学习曲线。
这个工具包是为中级开发人员设计的，这一点已经很明显了。然而，由于它被广泛接受，很难确定Tailwind的具体应用。它适用于电子商务吗？还是适用于营销网站？这一点不太明显，因为它看起来是一个多功能工具。这是一件好事。
集成
Tailwind CSS与各种前端框架和工具无缝集成。它与流行的JavaScript frameworks如React，Vue.js和Angular搭配得很好。此外，Tailwind CSS可以轻松集成到Webpack和PostCSS等构建工具中，确保流畅的开发工作流程和更精简的网站。下面的React代码片段应该在将其包含在已设置好Tailwind CSS的React应用程序中时，渲染为带有白色文本的蓝色按钮。
2024年Tailwind CSS的优势
Tailwind CSS在2024年为开发人员提供了几项有吸引力的优势：
- 响应式设计：首先，通过tailwind.config.js文件，它提供了高度可定制的方法，使开发人员可以定义颜色、断点、字体等等。
- 一致性：Tailwind通过其统一的设计系统确保了所有页面的前端一致性，并保持了一个连贯的设计。
- 快速开发：Tailwind CSS最引人注目的优势之一是加速开发能力。通过利用预定义的实用类，开发人员可以快速构建UI组件，而无需自定义CSS（我们想知道您使用Tailwind构建网站花了多长时间）。
- Tailwind UI库：Tailwind UI是一系列专业设计的、预建的且完全响应式的HTML代码片段，可以在Tailwind CSS项目中使用。它由Tailwind CSS团队运营，并提供各种UI组件、模板和示例，供开发人员作为网站开发项目的起点。Tailwind UI旨在帮助开发人员构建外观漂亮、功能齐全的用户界面，而不需要编写重复的代码。
- JIT模式：JIT模式是一种编译器，可以根据您在模板中使用的类仅在您编写模板时按需生成CSS样式，而不是在初始构建时生成所有类。在JIT模式下，Tailwind分析您的HTML模板，并根据标记中使用的类仅生成必要的CSS样式，从而提供更快的构建时间。
2023年Tailwind CSS的缺点
尽管Tailwind CSS带来了许多优势，但也受到了一些批评：
- 学习曲线：对于刚接触Tailwind CSS的开发人员来说，可能需要很长时间的学习曲线，直到熟悉基于实用类的方法。这可能会减慢初始开发速度，直到熟悉程度达到。
- “有限的设计创造性”：尽管Tailwind CSS提供了灵活性，尤其是与Bootstrap等其他流行框架相比，但一些设计师和开发人员可能会发现它对于高度创造性或非传统设计有所限制。我必须承认这一点有些微妙。虽然Tailwind是以实用为先，但它并没有真正限制了设计创造力。它足够灵活，可以让开发人员构建几乎任何东西。然而，挑战可能在于限制实用类的思维模式上。这更多地是关于适应一种新思维而不是设计创造力的实际限制。
- 大文件大小：Tailwind CSS可以生成较大的CSS文件，可能会影响页面加载时间。谨慎优化和树摇都是缓解此问题所必需的。然而，它与PurgeCSS的集成可以帮助开发人员获得更小和更快的文件。
<p p="" 值得注意的是，随着jit模式的出现，开发构建更加精简，因为只有使用的类会即时生成。
尽管如此，许多这些优势和缺点都是相对的。这就是为什么我们建议将Tailwind CSS与其他项目进行比较，例如世界著名的Bootstrap。
Tailwind CSS与Bootstrap相比：它如何表现？
当开发人员考虑一种新的样式工具时，Bootstrap通常作为比较的黄金标准。Bootstrap是一个组件化的框架，内置了诸如模态框、按钮和导航栏等可直接使用的组件。它是CSS世界中的“拿来即用”，注重速度和统一的外观。在2023年，你可以立刻看出一个网站是否使用了Bootstrap的光泽图标。
与之相反的是，Tailwind采用了以实用为导向的方法。而不是预设计的组件，你得到的是原子实用类。这个想法是什么？逐个构建你的UI，为设计师和开发人员提供更大的灵活性。所以，在Bootstrap中，一个按钮可能被确定为<button class=”btn btn-primary”>Bootstrap</button>，而在Tailwind中，则是：
这带来了定制化的问题。虽然Bootstrap可以使用SCSS变量进行定制化，远离其默认外观则需要覆盖样式，有时会导致“Bootstrap疲劳”，使得每个网站看起来异常相似。
而另一方面，定制化是Tailwind的乐园。tailwind.config.js文件是你的画布，允许定制化设计。你想要特定的蓝色或独特的断点吗？开发人员可以非常容易地定义它。所以，前往你的调色板选择网站，并开始吧。
Bootstrap作为一个文档完善、基于组件的框架，常常成为初学者CSS爱好者的首选。其响应式导航栏等现成组件意味着快速开发。然而，这种便利有时会导致项目臃肿，影响性能。
相比之下，Tailwind CSS就像是使用精密工具进行制作。与预先样式化的组件不同，你将面对精细的实用类。例如，在Bootstrap中，你可能只使用一个类来创建一个按钮，而在Tailwind中，你需要仔细定义其外观，使用一系列的工具类，如文本颜色、背景和内边距。这对于新手来说可能会显得很压力山大，但对于经验丰富的前端开发人员来说，它提供了无与伦比的控制水平。此外，Tailwind与PurgeCSS的集成可以帮助删除未使用的CSS，实现经济、快速的构建。
基本上，Bootstrap面向快速、统一的设计，而Tailwind非常适合经验丰富的开发人员追求设计准确度。这两者在2023年都是合理的选择。
2023年的Tailwind CSS真实案例
通过一位前端专家的证言，我们可以看到一个使用Tailwind CSS的案例，帮助最具相关性的在线业务：SaaS。在构建NodCards，一个数字名片平台时，开发人员遇到了一个挑战：允许用户动态选择任何主设计颜色作为他们的名片。这个选择必须在不改变网站标记或样式表的情况下进行整合。
结合Tailwind CSS和其即时编译器（前往Tailwind的官方网站了解如何启用它），开发人员找到了一个解决方法。然而，动态颜色应用并非很简单。开发人员不只是依赖于Tailwind的实用类，还利用了CSS变量和辅助函数的强大功能。
这个辅助函数将HEX颜色转换为RGB，有助于为动态主颜色创建CSS变量。一旦转换完成，这些RGB值将与Tailwind CSS集成，生成各种阴影，确保灵活性和不透明度叠加。例如，用户姓名的文本颜色可以根据动态设置：
同样，按钮可以使用主色样式，并具有可变的透明度，甚至可以在悬停时调整到可访问性的考虑：
借助Tailwind CSS，NodCards成功为用户提供了灵活性，可以动态地个性化他们的卡片设计，同时确保美观、易用和迅捷的网站。
总之
从知名网站和实际应用案例来看，明显可以看出Tailwind CSS绝非一时的潮流。如果你还在犹豫是否采用它，记住能力往往从实验开始。所以，深入其中，亲自尝试Tailwind，让你的作品自己说话。
