Open In App

Tailwind CSS vs Bootstrap

Improve
Improve
Like Article
Like
Save
Share
Report

Tailwind CSS was initially developed by Adam Wathan, and the first version was released back on the 1st of November, 2017. Tailwind CSS is a utility-first CSS framework for building custom user interfaces rapidly and efficiently. It is an inline styling used to achieve a sleek interface without writing code for your own CSS. Tailwind CSS offers customizability and flexibility to transform the appearance and feel of the elements. Tailwind CSS is not the first utility-first CSS library, but it is one of the most popular and light ones. It is a highly customizable, low-level CSS framework, and it provides all the building blocks the developer needs to build a fantastic interface for any website.

CDN link:

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>

Sample page made using Tailwind CSS:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Tailwind CSS -->
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
    <title>Tailwind CSS</title>
</head>
  
<body style="background-color: gray;">
  
    <!--Card 1-->
    <div class=" w-full lg:max-w-full lg:flex">
        <div class="border-r border-b border-l 
            border-gray-400 lg:border-l-0 
            lg:border-t lg:border-gray-400 bg-white
            \rounded-b lg:rounded-b-none lg:rounded-r
            p-4 leading-normal">
            <p class="text-gray-700 text-base">
                This Card is made using Tailwind CSS.
            </p>
        </div>
    </div>
</body>
  
</html>


Output:

Card made using Tailwind CSS

Bootstrap was developed by Mark Otto and Jacob Thorton during an internal competition at Twitter in August 2011. It is an open-source framework that is used to design responsive websites better, faster, and easier. It is a beginner-friendly and the most popular open-source framework that includes HTML, CSS, and JavaScript. Bootstrap can be used to create web applications with any server-side Technology like Java, PHP, etc., and its responsive design allows platforms like Mobile phones, tablets, and computers. Bootstrap contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation, icons, and other interface components. It is based on object-oriented CSS. Bootstrap helps to design and develop website templates quickly.

CDN link:

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>

Sample page made using BOOTSTRAP:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <title>BOOTSTRAP</title>
</head>
  
<body style="background-color: gray;">
    <div class="card">
        <div class="card-body">
            This Card is made using BOOTSTRAP.
        </div>
    </div>
</body>
  
</html>


Output:

Card made using BOOTSTRAP

Different versions of Bootstrap:  

  • Version 2.0 supports responsive web design.
  • Version 3.0 supports mobile-first design.
  • Version 4.0 introduces SASS and Flexbox support.

Tailwind CSS vs 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.


Last Updated : 02 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads