为什么我喜欢 Tailwind | CSS-Tricks

Max Stoiber 写了一些有趣的笔记，解释了为什么他喜欢 Tailwind。（Max 创建了 styled-components，所以他在样式方法论方面有一些经验。）这篇文章中有很多关于 Tailwind 如何出现并成为设计师和工程师的宝贵工具的历史，但他还谈论了 Tailwind 系统的核心是什么以及是什么让它如此方便

Tailwind 受欢迎的关键是框架核心精心构建的设计标记系统。该系统精心挑选的约束为开发人员提供了恰到好处的护栏。它们通过仅提供离散步骤来使选择是否好或坏变得显而易见。

他链接到 twin.macro——我之前从未听说过——然后举了一个类似这样的例子

import "twin.macro"

<div tw="text-center md:text-left" />

// ↓↓↓↓↓ turns into ↓↓↓↓↓

import "styled-components/macro"

<div 
  css={{
    textAlign: "center",
    "@media (min-width: 768px)": {
      "textAlign":"left"
    }
  }}
/>

这里发生的事情是，您可以像使用 Tailwind 一样使用预定义的类——添加间距，使 div 圆角，并设置特定大小等。twin.macro 的作用是让您使用这些类，但同时享受 CSS-in-JS 的额外好处。Max 写道

您将获得全自动的关键 CSS 提取和代码拆分。用户只加载他们请求的页面所需的样式——不多也不少！

我有点喜欢这个，将 Tailwind 作为一种简写，将其更像是一种建立在 CSS 之上的语法糖，而不是框架。非常有趣的东西。

直接链接 →

评论