Bootstrap 是一个工业级 CSS 框架，也是目前最流行的最著名的 CSS 框架，开发它的公司是 Twitter。
Tailwindcss 也是一个使用 CSS 原子类的，由 Adam Wathan 个人开发一个 CSS 框架（更多是作为一种工具或者插件）。
因为它们具有很多相同点，都是推荐使用原子类(atom class)的方式开发，bootstrap 含有更多的语义类(semantic class)，由于使用原子类方式，它们都定义了非常多的 CSS 类名，使用的原始CSS文件非常大（大于1M）。由于原子类只需要一种，他们之间的功能上是存在重叠，虽然他们的出发点或者理念是不一样的。
| Bootsrap | Tailwindcss | |
|---|---|---|
| 开发者 | Bootstrap team | Adam Wathan |
| 体积 | 4.51 MB(include js) | 3.75MB(all css) |
| 发布日期 | Jul 30, 2011 | Oct 6, 2017 |
| 下载量(npm) | 2,878,944/week | 548,881/week |
| 定制化难度 | 比较苦难 | 相对容易 |
| 模板数量 | 十分丰富 | 几乎没有 |
| 是否支持移动端 | 通过改变布局做到 | 移动端优先 |
Tailwindcss的特点
- 丰富的原子类，比 bootstrap 更多也更为彻底的把每个属性进行原子化，不仅拥有常用 bootstrap 的css，例如（字体大小 fs-2），也有svg相关的（例如fill-current），甚至是动作相关的（hover）。但是这些动作必须配合node.js的帮助，准确的说是postCSS的帮助，毕竟不是CSS标准，所以你可能需要它的工具链才能完全使用。
- 完全是纯CSS的构建后产物。纯CSS意味着体积非常小，可以专注优化CSS，而Tailwindcss的目的就是这个，这也是与Bootstrap区别非常大一个方面，Bootstrap并不是专注CSS，而是给你一个设计与模版，让你快速构建一个标准的网站。Tailwindcss 纯CSS这方面已经做的可以说非常好了，配合丰富的原子类，十分恰当。但是由于是纯CSS，面对例如一些操作相关的还是很弱，比如一个 Modal，可能Bootrap的两行代码（毕竟是配合JS的），Tailwindcss可能实现的非常麻烦，甚至无法去实现，这是CSS的功能限制。
- 体积很小，体积虽然他宣传时都是如果按照它的最佳实践，那将会很难超过10KB 但是实际上超过10KB对于一般网站还是很容易的，但是总体来说超过100KB确实很难。但是不妨碍它宣传的体积小，确实很是优点，但是对于网站整体而言，由于本身CSS调用的是浏览器API，而且不阻塞渲染，所以大小而言对性能影响远远没有JS文件大，而节省1M流量可能就一张图片的事情，可能并非特别重要，这也是CSS性能优化未受到主要关注的原因。因为浏览器内部已经优化足够好，我们需要做的可能不多，但是对于JS这种动态的，是需要我们优化的。
- 针对常见场景不足，由于它不包含JS，那么它只包含CSS，那么就是它没有常见场景的那些工具（例如card，modal，calendar），而且它并不会做这些方面，毕竟它的思维就是复用与管理，例如对一个 button 元素样式的重置，Bootstrap 会通过经验给你一个 btn 的类，然后你就可以愉快的修改基本的东西，对于Tailwindcss来说，你可能需要先了解一下如何去重置一个 button 元素，然后去修改。这对于简单一些东西来说通过它的自定义指令还是容易解决的，但是对于一些长期以来的经验的东西，如何组合CSS才能比避免浏览器bug来说，这些需要你自身有足够的经验。
Bootsrap 的特点
- 工业级成熟库，不仅是业界标准，还有大公司和团队支持，多年的经验使得它们积累不少经验解决了一些CSS问题。
- 不但拥有 CSS，而且有少量 JS，拥有JS有不少好处和坏处，坏处便是更紧密的结合到前端项目，虽然Bootstrap 5不再依赖Jquery，但是它自定义的JS，仍然很多的，不但体积庞大，而且无法拆分。好处是有了更多灵活的东西，更灵活的动画，更多的场景需要（例如日历卡片，自定义列表）。
- 对常见网页场景有针对的 CSS，这一点也是它能成为很多模版基础的原因之一，有了基础的场景，例如 card，再配上使用场景，你会感觉非常轻松的就能搞定一个 card 在网页上，而且它特意为互联网的常见的场景例如输入框、表单等等，都有专门的设计，为的就是快速上手与快速搭建。
- 模版市场非常丰富，几乎市场绝大部分模版都是基于 Bootstrap的，这个针对的是模版市场。不少设计师基本现在不会考虑 Bootstrap，因为它的已经存在审美疲劳，而且设计的偏工业化，现在的设计趋势肯定不是那种。
- 体积庞大，由于不断的发展，它的体积是越来越大了，当然互联网网速也越来越快，但是如果你确实对流量或者体积敏感，那还是需要慎重选择。
- 定制比较难，由于它内置非常多的场景，不单单是原子类，导致很多时候它常常不规范的使用 important 这个不好的关键词，选择器的等等问题，导致定制化来说相对比较困难的。
由于存在冲突，部分功能重叠，两者叠加则体积很大，所以一起使用的情况应该是罕见的。所以我们如何选择。
Tailwindcss
- 对node工具链不排斥，需要了解postCSS设置webpack
- 喜欢更细分的CSS
- 对CSS属性比较熟悉，对待常见特性与属性之间差异有了解
- 对定制化要求要求高，偏好自己的设计风格
- 对体积敏感，不需要JS的，专注于CSS的打造
Bootsrap
- 喜欢 Boostrap 的那种设计风格
- 对 CSS 并不特别熟悉
- 快速的成型
- 需要模板，以及寻求问题容易获得帮助。