CSS (Cascading Style Sheets) is a stylesheet language used to style the HTML elements in a webpage. CSS framework is a library which enables the developers to design more standard-compliant websites using CSS in an easier way. These libraries are ready-to-use so there is no need of writing the long and monotonous CSS codes.

Instead of starting your every project from zero, a CSS framework offers you tools which can quickly make a user interface that can be repeated more than once during the whole project. In this article, we will discuss about the two popular CSS frameworks- Tailwind CSS and Bootstrap.

Tailwind CSS

Tailwind CSS was developed by Adam Wathan. Tailwind CSS is a utility-first and lowlevel framework of CSS. It offers single-purpose classes which can be directly used within the webpage to style an element. It enables the developers to rapidly create customised user interfaces. Tailwind CSS is one of the most popular utility-first CSS libraries.

Typical user interfaces tools have in-built components and features in it, so, it is difficult for the developers to create a unique UI. However, Tailwind CSS provides a lot of flexibility and command over how an element will look and act. This makes it perfect to create unique and custom user interfaces.

To apply Tailwind CSS in your web page, use the following CDN link −

“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css”

Example

 
<!DOCTYPE html> <html> <head> <title> Tailwind CSS </title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <h1 class= "m-2 inline-block bg-teal-400 text-4xl"> Tutorialspoint </h1> <br> <h2 class= "m-2 inline-block bg-teal-400 text-2x1"> Tailwind CSS </h2> <div class= "w-full lg:max-w-full lg:flex"> <div class= "rounded-3xl h-16 w-24 flex bg-orange-400 m-2 border-black-600 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white \rounded-b lg:rounded-b-none lg:rounded-r p-2 leading-normal"> <p class="text-black-400 text-base"> This is an example.</p> </div> </div> </body> </html>
 
Advantages of using Tailwind CSS
 
Following are the advantages of using Tailwind CSS –
 
     
  •  
    Using the pure CSS will require you to write more codes for adding unique features to the elements. Hence, this increases the CSS file size of your web page. Whereas, on using Tailwind CSS, you already have utility classes, so, you can directly write them and also reuse them throughout the web page. This provides us a smaller CSS file.
     
    •  
  •  
    The utility classes available are local that is, you can update or modify without disturbing or breaking the web application. It is not possible to do so using pure CSS. It is highly customizable thus, enables us to create unique UI. It offers various features like different color palettes, styling, spacing etc.,
     
    •  
  •  
    While using Tailwind CSS, you do not need to name the classes because they have common utility classes. This makes it easier for the developers to create custom elements.
     
    •  
 
Bootstrap
 
Bootstrap is a free open-source CSS framework used for creating responsive web and mobile applications. It is a mobile-first front end development framework. It contains HTML, CSS and JavaScript templates for various components. Bootstrap was developed by Mark Otto and Jacob Thorton. It is one of the most popular frameworks. It is one of the most popular open-source frameworks.
 
It enables the developers to create web and mobile based applications using server-side technologies like Java, PHP, etc., It is used to create applications which can work on various platforms like mobile, tablets, laptops, desktop etc., Bootstrap version 2 supported responsive web applications, its version 3 supported mobile application while its latest version 4 supports SASSs and Flexbox.
 
To apply Bootstrap in your web application, use the following CDN link −
 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

 
Example
 
 
 
<!DOCTYPE html> <html> <head> <title> Bootstrap </title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel= "stylesheet"> </head> <body> <h1 class= "ml-3 mt-3"> Tutorialspoint </h1> <h3 class= "ml-3 mt-2"> Bootstrap </h3> <button type= "button" class= "btn btn-dark ml-4 mt-3"> This is an example </button> <button type= "button" class="btn btn-success ml-3 mt-3"> Success </button> </body> </html>
 
 
Advantages of using Bootstrap
 
Following are the advantages of using Bootstrap –
 
     
  •  
    It is a powerful framework used for front end development.
     
    •  
  •  
    Bootstrap offers ready-made themes and templates to the developers. This increases the speed of development.
     
    •  
  •  
    It has introduced the idea of mobile-first in which the screen is divided into 12 grid system. It ensures cross-browsers compatibility.
     
    •  
  •  
    It can be customized according to the project needs. It provides base styling for HTML elements like buttons, off-canvas, accordion, images, icons, tables, forms, code, topography, alerts, progress bars, dropdowns, etc.
     
    •