Tailwind CSS 解决了什么问题?

从页面样式设计的颗粒度 Granularity 来谈起

元素颗粒度

我们知道,构成网页页面元素的最底层,最原始的东西就是 HTML & CSS
为每一个元素指定不同的 内联 inline-style 或者 class 来控制它的呈现方式,最细程度可以到元素的 style属性来控制,颗粒度停留在元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <div>
    <h1 style="font-size:28px;">Hello, World!</h1>
    <p style="text-indent: 1em;">This is a basic Hello World page using Bootstrap.</p>
  </div>
</script>
</body>
</html>

组件颗粒度

后来有一些人发现每次起一个新项目都要重复的开发(复制)一套设计体系是一件很麻烦的事(复用以前的样式),应该存在一种通用方案去解决这类问题,于是 Bootstrap 出现了
Bootstrap 的颗粒度是基于网页常用元素的组件概念来设计的,有一套自己从上至下的完整设计体系(颜色,间距,主题色,圆角,线宽等等一系列预设),颗粒度一下上升到了 组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World with Bootstrap</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-5">
    <h1>Hello, World!</h1>
    <p>This is a basic Hello World page using Bootstrap.</p>
  </div>

  <!-- Bootstrap JS Bundle (Popper.js and Bootstrap JS) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

同类的产品有很多,比如国内的有 Element, AntDPro 系列,这类重型组件通常用于系统控制台,一般的网站后端功能使用。

可复用的元素颗粒度

好的,现在 Tailwind CSS 出现了,它的出现试图解决 “过重” 以及 “过轻” 的问题,在一些需要高度定制化组件的场景,你不想复用第三方设计好的组件,但是又不想完全从头开始使用原生样式搞一套设计体系出来
通过 Tailwind CSS,可以复用一些常用样式

更适合于直接面向客户的一端,初创公司(没有自己的设计体系,需要临时搞一套出来),外包项目

posted @   我听不见  阅读(55)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示