Tailwind 框架中掌握 Spacing 系统的技巧

阅读时长 5 分钟读完

背景简介

Tailwind 是一款受到广泛欢迎的现代化 CSS 框架，它通过一套预定义的 CSS 类，提供可复用的组件和其他实用工具，使得使用者可以轻松构建出现代化且高度定制的界面。其中，Tailwind 提供了一个 Spacing 系统，它可以让你轻松地在样式中添加和管理内边距、外边距等基础尺寸，有效的提升了开发体验和代码复用性。本篇文章主要介绍如何更好的掌握 Tailwind 框架中的 Spacing 系统。

Spacing 系统的基本认识

在 Tailwind 中，Spacing 系统是由一组原子类组成的。这些原子类提供了一组用于调整元素内边距、外边距、宽度、高度等距离的 CSS 类，它们的命名方式遵循了一套规范，以实现在 CSS 样式中快速定义调整间距的效果。

在 Tailwind 中，Spacing 系统主要分为以下两类：

1. 内外边距类

这些类用于添加内部和外部的边距。它们的命名规则如下：

  • p：用于添加内部的边距。例如， p-4 将在元素周围添加 4px 的内部间距；
  • m：用于添加外部的边距。例如， m-4 将在元素周围添加 4px 的外部间距。

同时，这些类还可以根据具体的方向进行设置。例如：

  • pt：用于添加顶部的内部间距。例如， pt-4 将在元素顶部添加 4px 的内部间距；
  • ml：用于添加左侧的外部间距。例如， ml-4 将在元素左侧添加 4px 的外部间距。

值得注意的是，距离单位不是硬编码在 Tailwind 中的，而是通过配置文件设置的。不能直接使用像 px、em 或 rem 这样的单位来设定边距，而是使用表格中的一种缩写。

缩写 名称 值
px 像素 1px
% 百分比 1%
auto 自动 auto

2. 宽高类

这些类用于设置元素的宽度和高度。它们的命名规则如下：

  • w：用于设置元素的宽度。例如， w-64 将设置元素的宽度为 64px；
  • h：用于设置元素的高度。例如， h-64 将设置元素的高度为 64px。

这些类的命名方式与前面介绍的方式是相同的，同时也支持根据方向设置。例如：

  • min-w：用于设置元素的最小宽度。例如， min-w-screen-sm 将设置元素的最小宽度为屏幕宽度超过 640px 时的宽度。

由于 Spacing 系统是一个强大的工具，利用得当可以大大的提高开发效率和维护性，所以下面我们来了解一下，如何更好的使用这个系统。

控制间距的强大套路

  1. 在配置文件中开启不常用边距 不需要的类会使项目变得更大，如果您特别需要更多的扩展，则可以在 Tailwind 的配置文件中对类缩写进行配置。在此文件中搜索并取消注释以启用您希望添加的类。

  2. 跳用到更强大的函数 在 Tailwind 中使用「calc」函数来有效地计算数字。这使你可以使用计算机来计算像 1/3 这样的双倍位数。例如：

在此示例中，我们使用“calc(100% – 2 * 0.25em)”来计算该 div 的宽度，该 div 的“px”边距刚好为 0.25em。这是使用“calc”函数的一个很好的例子，它已经获得了快速、轻松地使用 Tailwind。

  1. 使用更少的类 相对于使用具有流程等的样式，结果越匹配，使用间距类更利于独立。出于实用目的，应重复使用较小的类，并避免一次使用太多类。例如，类似于以下代码是合理的：

  1. 仔细考虑选择器 使用 Tailwind 的大部分过程都涉及到使用最小的 CSS 选择器来为 HTML 标记应用样式。如果您应用样式前将考虑选择器，就可以比以后选择更好的类。

  2. 学习利用了什么 工具的使用越来越普遍，可阅读 Tailwind 的源代码是具有教育意义的。阅读源代码使用哪些类和函数，以及如何组合它们。优秀的阅读性代码不仅是学习的好方式，还可以帮助你自己的工作。

  3. 不舍得为代码付出时间 与随时提供的 CSS 文件不同，在 Tailwind 中，您花费时间为 HTML 标记选择类。不能通过任何其他方式来快速实现这一点，因此通常编写代码的时间比较长。

  4. 看看线框图 将前端与后端联系起来时，使用线框图很重要。通过将 HTML 标记放在线框图中，为您的应用程序设置样式可以更加方便且便于理解。同时该方法还有助于在后期更快地进行更改和维护。

  5. 使用 Tailwind 安装程序 Tailwind 提供了非常出色的配置工具，该工具可以根据您的需求在本地计算出使用的类。这是为 Tailwind 软件包添加更多类的好方法。此安装程序接受您的 Tailwind 配置并在您的应用程序中生成最小的 CSS 文件。

示例代码

下面为您展示更好的使用 Tailwind 框架中的 Spacing 系统示例代码。

-- -------------------- ---- -------
---- --------------------- -------- --- -----
     -- ---------------- ----------- --------- ----------------- -- ------------
     ----
     -- ------------------ -------- -------------------- ------- ----------
     ----
     -- ---------------------
       ---- ------- ------- --- --- -- ------ --- ------- ------ -- --- -------- --------- -- ------- ---- ----------- ---------- --- ---- ------ 
     ----
------

结论

在本文中，我们详细介绍了 Tailwind 框架中的 Spacing 系统，并提供了易于遵循的强大示例和套路。正确使用这些工具将使您的样式代码更加规范化，更易于理解和维护。它可以帮助您获得更高效的开发流程，同时提高开发效率。而且，它还可以减轻整个项目的保养负担，提高生产力！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672afea0ddd3a70eb6d151e6

纠错
反馈
相关推荐
精选内容