Tailwind CSS 与 Bootstrap

Tailwind CSS 最初由 Adam Wathan 开发，第一个版本于 2017 年 11 月 1 日发布。Tailwind CSS 是一个实用程序优先的 CSS 框架，用于快速高效地构建自定义用户界面。它是一种内联样式，用于实现时尚的界面，而无需为您自己的 CSS 编写代码。 Tailwind CSS 提供可定制性和灵活性来改变元素的外观和感觉。 Tailwind CSS 不是第一个实用程序优先的 CSS 库，但它是最流行和最轻量级的库之一。它是一个高度可定制的低级 CSS 框架，它提供了开发人员为任何网站构建出色界面所需的所有构建块。

CDN链接：

使用Tailwind CSS制作的示例页面：

HTML

  

    
    
    

  

  
    
    

        

            

                This Card is made using Tailwind CSS.
            
        
    

  

输出：

使用 Tailwind CSS 制作的卡片

Bootstrap 由 Mark Otto 和 Jacob Thorton 在 2011 年 8 月的 Twitter 内部竞赛中开发。它是一个开源框架，用于更好、更快、更轻松地设计响应式网站。它是一个对初学者友好且最流行的开源框架，包括 HTML、CSS 和 JavaScript。 Bootstrap 可用于使用Java、 PHP等任何服务器端技术创建 Web 应用程序，其响应式设计允许手机、平板电脑和计算机等平台。 Bootstrap 包含用于排版、表单、按钮、导航、图标和其他界面组件的基于 CSS 和 JavaScript 的设计模板。它基于面向对象的 CSS。 Bootstrap 有助于快速设计和开发网站模板。

CDN链接：

使用 BOOTSTRAP 制作的示例页面：

HTML

  

    
    
    

  

    

        

            This Card is made using BOOTSTRAP.
        
    

  

输出：

使用 BOOTSTRAP 制作的卡片

不同版本的 Bootstrap：

• 2.0 版支持响应式网页设计。
• 3.0 版支持移动优先设计。
• 4.0 版引入了 SASS 和 Flexbox 支持。

Tailwind CSS 与 Bootstrap：

Tailwind CSS	Bootstrap
Tailwind offers predesigned widgets to build a site from scratch with fast UI development.	Bootstrap comes with a set of pre-styled responsive, mobile-first components that possess a definite UI kit.
Tailwind CSS uses a set of utility classes to create a neat UI with more flexibility and uniqueness.	Sites created using Bootstrap follow the generic pattern that makes them look identical.
Websites created using Tailwind CSS are much more customizable.	Websites created with Bootstraps are known for their responsiveness and flawless design, but the looks are generic and similar.
Tailwind CSS is relatively newer, and there is still much room to grow in terms of its community, however, it is growing day by day, and the number of users, references, tools, and websites related to it are also increasing.	Bootstrap is efficient and saves a lot of time. It has been around for more than nine years and being the most popular CSS Framework, it has a large community of developers, forums, tools, and so on.
Tailwind CSS only needs the base stylesheet file, which amounts up to 27kb making it lighter.	Bootstrap has four files that are required to include in your project to get the full benefit of the CSS Framework. The total size of these files is 308.25kb including, jQuery, Popper.js, Bootstrap JS, and the main Bootstrap CSS file.
Tailwind CSS is used by BlaBlaCar, Exyplis, and Bazzite.	Spotify, Twitter, and Lyft are some of the famous companies that use Bootstrap.