转型:从函数式 CSS 到 Tailwind CSS
Posted: Sat Feb 22, 2025 9:09 am
随着 Tailwind 项目的进展,很明显“功能性 CSS”这个术语对于这种独特的框架和方法来说太过通用。因此在2018年初,它被重新命名为“Tailwind CSS”。这个名字恰当地比喻了它的使命:创建一种工具,帮助专业开发人员无缝浏览 CSS 的众多变量和选项。
自正式发布和更改以来,Tailwind CSS 的受欢迎程度一直呈指数级增长。该框架的采用得益于其以开发人员为中心的设计,以及一个定期为其生态系统做出贡献的活跃的开发人员社区。 Tailwind UI 于 2020 年推出是一个重要的里程碑,它提供了大量可立即使用的组件库,进一步增强了该框架的吸引力。
PurgeCSS:一种有效方法
考虑到文件大小可能增加,许多开发人员可能会对实用优先的 CSS 框架的前景感到惊讶。这里的想法是,如果你加载“所有可能的 Tailwind CSS 类”,你最终会得到一个特别大的 CSS 文件。这种担忧虽然合理,但 Tailwind 自动使用PurgeCSS 的方式可以缓解这种担忧,无需进行任何配置。
PurgeCSS 通过从样式表中删除未使用的类来显 英国电报筛选 著减少最终 CSS 文件的大小,确保您的生产构建尽可能顺利。得益于 PurgeCSS,Tailwind 的实用优先方法不会增加文件大小,这使其成为注重性能的项目的可行选择。如果您关心网络性能(和核心网络生命力)它应该是您的默认选择!
为了证明这一说法,让我们简单提一下其他选择。如果您使用 CSS-in-JS,则每个组件都会变得臃肿,并且缺乏可重用性,因此假设最终需要传输 100KB 的数据。 BEM 模型将类似,因为它将写入 display: flex;分成几十个独立的组件,导致数据传输量约为 100KB。
理论上,您可以优化常规 CSS 文件,无论是否使用 PurgeCSS,但我从未见过有人这样做。典型的专业级 CSS 文件往往有 10,000 行或更多,并且通常无法删除任何内容以防止它们损坏,至少在没有像 PurgeCSS 这样的工具的情况下是不行的。相比之下,Tailwind CSS 只会发送所需的 CSS,这通常会导致大型网站仅需要 20 到 40 KB 的数据传输。
开发人员体验直观而简单
Tailwind CSS 的崛起不能仅仅归功于它的技术特性。它提供的整体开发人员体验是其受欢迎的主要因素。一旦你习惯了它,你会发现 Tailwind 很直观;直接在 HTML 中放置类看起来很正常,并且比 CSS 需要的输入更少。
Tailwind 社区和资源
Tailwind CSS 拥有一个蓬勃发展的社区,为其成长做出了贡献。围绕 Tailwind 构建的教程、资源和插件使得学习和使用该框架更加容易。一个很好的例子是“ Line Wrap Plugin ”,它可以使用省略号自动缩短行(...)。该插件非常受欢迎,现在已集成到 Tailwind 中!
此外,Tailwind 开发团队经常与社区沟通,根据用户反馈对产品进行更新和改进。
结论
Tailwind CSS 的流行可以归因于其实用性优先的理念、高度可定制性、自动开箱即用的性能优化以及具有完全设计自由的开发人员优先方法。这些功能的组合使得代码编写速度比常规 CSS 更快(因为需要输入的字符更少),并且通过“一个文件”方法(而不是在 CSS 文件之间来回跳转)减少了脑力负担。
自正式发布和更改以来,Tailwind CSS 的受欢迎程度一直呈指数级增长。该框架的采用得益于其以开发人员为中心的设计,以及一个定期为其生态系统做出贡献的活跃的开发人员社区。 Tailwind UI 于 2020 年推出是一个重要的里程碑,它提供了大量可立即使用的组件库,进一步增强了该框架的吸引力。
PurgeCSS:一种有效方法
考虑到文件大小可能增加,许多开发人员可能会对实用优先的 CSS 框架的前景感到惊讶。这里的想法是,如果你加载“所有可能的 Tailwind CSS 类”,你最终会得到一个特别大的 CSS 文件。这种担忧虽然合理,但 Tailwind 自动使用PurgeCSS 的方式可以缓解这种担忧,无需进行任何配置。
PurgeCSS 通过从样式表中删除未使用的类来显 英国电报筛选 著减少最终 CSS 文件的大小,确保您的生产构建尽可能顺利。得益于 PurgeCSS,Tailwind 的实用优先方法不会增加文件大小,这使其成为注重性能的项目的可行选择。如果您关心网络性能(和核心网络生命力)它应该是您的默认选择!
为了证明这一说法,让我们简单提一下其他选择。如果您使用 CSS-in-JS,则每个组件都会变得臃肿,并且缺乏可重用性,因此假设最终需要传输 100KB 的数据。 BEM 模型将类似,因为它将写入 display: flex;分成几十个独立的组件,导致数据传输量约为 100KB。
理论上,您可以优化常规 CSS 文件,无论是否使用 PurgeCSS,但我从未见过有人这样做。典型的专业级 CSS 文件往往有 10,000 行或更多,并且通常无法删除任何内容以防止它们损坏,至少在没有像 PurgeCSS 这样的工具的情况下是不行的。相比之下,Tailwind CSS 只会发送所需的 CSS,这通常会导致大型网站仅需要 20 到 40 KB 的数据传输。
开发人员体验直观而简单
Tailwind CSS 的崛起不能仅仅归功于它的技术特性。它提供的整体开发人员体验是其受欢迎的主要因素。一旦你习惯了它,你会发现 Tailwind 很直观;直接在 HTML 中放置类看起来很正常,并且比 CSS 需要的输入更少。
Tailwind 社区和资源
Tailwind CSS 拥有一个蓬勃发展的社区,为其成长做出了贡献。围绕 Tailwind 构建的教程、资源和插件使得学习和使用该框架更加容易。一个很好的例子是“ Line Wrap Plugin ”,它可以使用省略号自动缩短行(...)。该插件非常受欢迎,现在已集成到 Tailwind 中!
此外,Tailwind 开发团队经常与社区沟通,根据用户反馈对产品进行更新和改进。
结论
Tailwind CSS 的流行可以归因于其实用性优先的理念、高度可定制性、自动开箱即用的性能优化以及具有完全设计自由的开发人员优先方法。这些功能的组合使得代码编写速度比常规 CSS 更快(因为需要输入的字符更少),并且通过“一个文件”方法(而不是在 CSS 文件之间来回跳转)减少了脑力负担。