从页面样式设计的颗粒度 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
同类的产品有很多，比如国内的有 Element， AntDPro 系列，这类重型组件通常用于系统控制台，一般的网站后端功能使用。
可复用的元素颗粒度
好的，现在 Tailwind CSS 出现了，它的出现试图解决 “过重” 以及 “过轻” 的问题，在一些需要高度定制化组件的场景，你不想复用第三方设计好的组件，但是又不想完全从头开始使用原生样式搞一套设计体系出来
通过 Tailwind CSS，可以复用一些常用样式
更适合于直接面向客户的一端，初创公司（没有自己的设计体系，需要临时搞一套出来），外包项目
标签：Tailwind,Bootstrap,组件,颗粒,解决,World,Hello,CSS From： https://www.cnblogs.com/ninkaki/p/17844307.html