背景

Tailwind 是一个基于 Atomic/Utility-First 标准 CSS 框架，提供了根底的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能间接在脚本标记语言中组合起来，构建出您想要的设计。

目前支流的 UI 框架，如 Ant-design，则采纳间接提供现成组件（如：按钮 buttin、表单 form 等组件）的形式。开发者能够应用框架提供的组件疾速进行页面构建，但因为组件的款式个别是提前预设并且封装好的，若要定制款式，须要大量笼罩组件的内置款式。

Tailwind 没有提供现成的组件，而是提供各种通用的款式类。开发者能够间接在 HTML 的 Tag 增加各种根底的 class 为元素设置相应的 UI 款式，通过各种根底的 class 的「叠加组合」构建出所需的外观，高效地进行定制化的网站开发。换言之，在 TailwindCSS 中，有许多小类代表 CSS 申明。当创立组件时，只须要援用其中的一些小类就能够创立您须要的组件。

Semantic CSS | Atomic/Utility-First CSS

Semantic CSS

要制作一个 button 按钮的款式，咱们个别会在 html 或者 jsx 构造中增加富裕语义化的 class 类名，随后在 css 款式中写入对应类的款式。例如：制作一个 danger 款式的 Button 按钮。

  <div class="box">
    <button class="danger-button">Button</button>
  </div>

.danger-button {
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  border-color: #ff4d4f;
  background: #ff4d4f;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px #0000000b;
}

以上是最常见、最惯例的写法，被称作 Semantic CSS（语义化 CSS）标准。在这种标准下，谋求关注点拆散，让构造与款式各司其职，使构造更具语义化。但这样一来，也面临着许多问题：

• 给标签增加一个款式须要搜索枯肠想类名，既要语义化，又要合乎代码标准，还要和它作用相符合；
• 每个类中往往会有很多个款式规定，只有构造的语义、款式完全相同时能力做到真正的复用，若存在差别，就难以实现款式复用；
• 如果将 html 或 jsx 构造做迁徙，咱们同时还要将相应的 css 迁徙，迁徙后的款式也可能随上下文环境变得错乱。
• ……

Atomic/Utility-First CSS

Atomic/Utility-First CSS 与 Semantic CSS 绝对，Utility-First CSS（性能类优先 css）不像 Semantic CSS 那样将组件款式放在一个类中，而是为咱们提供一个由不同性能类组成的工具箱，咱们能够将它们混合在一起利用在 html 元素上。在物理世界中，原子是形成个别物质的最小单位，而在 css 世界中，遵循一个类中只有惟一的 css 规定。

Tailwind CSS，用法与 Bootstrap 相似，都是通过类名来援用款式。最大的区别，也是 Tailwind CSS 的外围，即它是一套以 Atomic/Utility-First CSS 为根底 CSS 框架。

Tailwind CSS 长处

• 可定制化水平极高：

  Tailwind 带有一个默认配置，你能够应用我的项目中的“tailwind.config.js”来笼罩默认配置。从色彩、间距大小到字体的所有内容都能够应用配置文件轻松定制。且配置文件的每个局部都是可选的，您只需指定要更改的内容，缺失的局部将应用 Tailwind 的默认配置。

• 缩小为 class 取名字的苦恼。
• 无需切换上下文：Tailwind 提供了简直所有须要的开箱即用，开发者不再须要数百次从 HTML 切换到 CSS。

• 响应式设计

  • Tailwind CSS 遵循挪动优先的设计模式，断点零碎很灵便。比方实现一个媒体查问，要求依据不同的屏幕宽度实现不同的图片宽度。传统写法如下：

@media only screen and (max-width:1280px) {
    .content {width:196px;}
}
@media only screen and (max-width: 760px) {
    .content {width:128px;}
}

在 Tailwind CSS 中表述如下：

<div class="w-16 md:w-32 lg:w-48" src="...">

应用技巧

抉择数字标签而不是语义标签

TailwindCss 具备较好的语义化，但应用默认的命名计划，会大大增加开发者的记忆老本，例如：字体粗细值从 thin（100）定义到了 black（900）。
应用数字标签的形式能够缩小 UI 工具的值转换为 TailwindCss 类的老本。例如：font-weight: 600 不分明对应 font-bold 还是 font-semibold，但 font-600就很明确。

语义标签总是不好的，但数字标签也不能笼罩所有场景，须要确定哪种形式让咱们应用起来更加受害。

fontWeight: {
    thin: '100',
    extralight: '200',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
}

fontWeight: {
    100: '100', 
    200: '200',
    300: '300',
    400: '400',
    500: '500',
    600: '600',
    700: '700',
    800: '800',
    900: '900',
}

不倡议应用 @apply

提取组件

Tailwind 是实用程序优先的框架，因而创立的组件将蕴含实用工具类的汇合。这象征创立雷同的组件时，将编写雷同的实用工具类集。即当您想为该组件更改一个实用工具类时，就须要更改所有具备雷同“用意”的组件。

为了克服这个问题，Tailwind 提供了一种解决方案，即“提取组件”。Tailwind 提供了伪指令 @apply， 它容许一次组合多个实用工具类。例如，您有一个按钮组件，其构造如下：

<button class="button">   
    Button
</button>
<style> 
.button {@apply bg-blue-600 text-white px-4 py-2 rounded;} 
</style>

从性能上来说，应用 @apply 生成新的性能类，会产生多余的 css，咱们应尽量不应用它，这与 TailwindCss 设计南辕北辙。

应用 Tailwind

制作一个根底按钮

<button type="button" class="py-2 px-4 bg-red-500 text-white font-semibold rounded-lg shadow-md">
  button
</button>

响应式布局

Tailwind 中的每个实用程序类都能够在不同的断点处有条件地利用，这使得在不来到 HTML 的状况下构建简单的响应式界面变得简略。

受常见设施分辨率的启发，Tailwind 提供 5 个断点：

• sm 实用于最小宽度为 640px 的设施；
• md 实用于最小宽度为 768px 的设施；
• lg 实用于最小宽度为 1024px 的设施；
• xl 实用于最小宽度为 1280px 的设施；
• 2xl 实用于最小宽度为 1536px 的设施。

以下是一个营销页面组件的简略示例，它在小屏幕上应用重叠布局，在大屏幕上应用并排布局（调整浏览器大小以查看其实际效果）：

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
     <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.5tu.cn%2Fuploads%2Fallimg%2F1706%2Fpic_5tu_big_201705201558243571.jpg&refer=http%3A%2F%2Fpic.5tu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637733958&t=28299dabd6e0330e876dcf7195742f1f" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Finding customers for your new business
      </a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
      </p>
    </div>
  </div>
</div>

增加按钮状态

相似于 Tailwind 解决响应式设计的形式，悬停、焦点等的款式元素能够通过在实用程序后面加上适当的状态变量来实现。例如：增加悬浮状态hover:bg-red-700。

<button class="... hover:bg-red-700">
    Button
</button>

总结

以上就是本期 Tailwind CSS 入门和实际分享。前期文章，咱们将持续探讨如何应用全象云低代码平台搭建一个固资管理系统。敬请期待。

另外，近期全象云低代码平台安装包、安装程序将会开源，届时欢送大家下载体验。

对于全象云

全象云平台（https://portal.clouden.io）是青云科技自主研发的低代码平台，是基于云原生、用于辅助构建企业各类数字化利用的工具和集成平台。

平台目前提供云上无代码和低代码两种利用开发模式，屏蔽了技术的复杂度。反对可视化设计器，让开发人员和业务用户可能通过简略的拖拽、参数配置等形式疾速实现利用开发。同时集成了 IDaaS 身份认证能力、容器 DevOps 能力，反对企业存量业务与全象云业务交融。平台还蕴含丰盛的开发接口和弱小的插件机制，开发者可依据须要一直拓展平台的利用能力。
全象云的愿景是：在企业生产经营的各个象限、各个环节提供软件构件或反对服务。