Tailwind CSS:实用优先的 CSS 框架和 API,用于快速响应式设计

Tailwind CSS 框架

虽然我每天都在深入研究技术,但我没有太多时间来分享我公司为客户实施的复杂集成和自动化。 同样,我没有太多的探索时间。 我写的大部分技术都是寻求 Martech Zone 涵盖它们,但每隔一段时间 - 特别是通过 Twitter - 我看到一些关于我需要分享的新技术的嗡嗡声。

如果您从事网页设计、移动应用程序开发,或者甚至只是建立一个内容管理系统,您可能已经与跨多个样式表的竞争样式的挫折作斗争。 即使在每个浏览器中内置了惊人的开发工具,跟踪和清理 CSS 也需要太多的时间和精力。

CSS框架

近年来,设计师在发布已准备就绪并可供使用的款式系列方面做得非常出色。 这些 CSS 样式表更广为人知的是 CSS 框架,它试图容纳所有不同的样式和响应能力,以便开发人员可以只引用一个框架,而不是从头开始构建 CSS 文件。 一些流行的框架是:

  • 引导 – 一个发展了十多年的框架,首先由 Twitter 引入。 它提供了无数的功能。 它确实有缺点,需要 SASS,难以过度使用,依赖于 JQquery,并且加载起来非常繁重。
  • 布尔玛 – 一个对开发人员友好且不依赖于 JavaScript 的干净框架。
  • 基金会 – 一个更通用和可用的 CSS 框架,它拥有大量易于定制的组件。 此外,还有 电子邮件基础运动UI 用于动画。
  • UI套件 – HTML、JavaScript 和 CSS 的组合,可让您快速轻松地开发前端。

Tailwind CSS 框架

虽然其他框架在适应流行的用户界面元素方面做得很好,但 Tailwind 使用了一种称为 原子 CSS. 简而言之,Tailwind 使用自然语言巧妙地组织了类名,以实现他们所说的。 因此,虽然 Tailwind 没有组件库,但仅通过引用 CSS 类名即可轻松构建强大的响应式界面的能力是优雅、快速且无与伦比的。

这里有一些非常棒的例子:

CSS网格

css 列开始网格列

CSS 渐变

css渐变

用于暗模式支持的 CSS

CSS暗模式

Tailwind 也有很棒的 扩展可用 用于 VS Code,以便您可以轻松地从 Microsoft 的代码编辑器中识别和插入类。

更巧妙的是,Tailwind 在为生产构建时会自动删除所有未使用的 CSS,这意味着您的最终 CSS 包可能是最小的。 事实上,大多数 Tailwind 项目向客户端交付的 CSS 都不到 10kB。

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.