网页框架比一比-30天学会HTML＋CSS，制作精美网站

介绍完如何制作响应式网站後，当然也会想说有没有更快速的框架可以使用，所以今天就要来介绍目前最多人使用的Tailwind及Bootstrap

什麽是Tailwind CSS?

Tailwind CSS 最初由Adam Wathan 开发，於2017 年11 月1 日首次发布。他是一个功能优先的框架，提供超超多单一功能的class名称，像是文字大小、字型、背景色、框线等想得到的样式，使用上自由程度高，让我们能够客制化任何元件，快速刻板。

优点

CSS Utility

提供多种不同的Utility，运用各种不同的 Utility 拼成想要的样子。
就像乐高积木一样，只需要将积木的零件，拼成你想要的样子。

不用为了命名 CSS 烦恼

在撰写的时候，有时候会为了命名共用样式的名称或是class名称所困扰。

一个轻量级的CSS框架

会依照使用者使用的Utility，包装成档案，没有使用到的就不会在里头，减少读取的负担

缺点

HTML看起来很凌乱，一大串的class名称

<div class="font-sans font-bold text-3xl text-center text-indigo-600"> ... </div>

配置门槛高，适合有经验的人

如果想直接使用CDN，他功能没有这麽完善，且官网也不建议使用此方法。所以就要用PostCSS插件的方式来安装 Tailwind CSS，官网列出使用CDN需要注意事项

详细安装说明可以到Tailwind CSS官方查看详细安装步骤

在VS Code上写Tailwind时也有很好的插件辅助

什麽是Bootstrap?

Bootstrap 於2010 年年中作为Twitter 内部设计工具的一个分支启动，并於2011 年8 月19 日成为开源框架。他已经有预先设置好基本样式，不需要重头自己自订样式，只要复制code就就可以了，像是表格、按钮、表单、面包屑等元件。

优点

组件类型CSS框架

提供很多不同类型的组件，可以快速的切出网页及元件样式。

不需要引入大量的 jQuery套件

bootstrap里面有很多常用的组件，就不需要引入各种不同的jQuery套件，也不用套件之间会有冲突

缺点

档案很大

不管你有没有使用到元件，他就是完整的样式档案，如果需要制定样式，就需要覆盖默认的属性，导致大量无效样式加载

元件都样式都长得差不多，客制化门槛高

直接套用Bootstrap元件，如果都不修改的话，每个网站的样式看起来就都会一样，甚至一看画面就会知道是套用Bootstrap

结论

tailwind自由度高，可以完全客制化，但是HTML会满满的code，看起来会很凌乱；Bootstrap有现成的组件，在制作後台或是不需要美化的网站，可以快速开发，且很容易上手。因此tailwind与Bootstrap各有优缺点，要使用什麽框架还是要依需求和偏好来做选择。