<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

- **PostCSS**
TailwindCSS can also be installed as a PostCSS plugin which provides the easiest way to integrate it with other build tools.

- **Play CDN**
You can also use TailwindCSS right in the browser without any build step, this is specifically designed for development purposes alone and not the best choice for production purposes.

###Pros
The key idea behind Tailwind CSS is that instead of writing CSS from scratch, you can simply add pre-defined classes to your HTML markup. Some major benefits of using TailwindCSS are:

- **Speed**
TailwindCSS can help speed up your development process by reducing the amount of custom CSS you need to write.

- **Consistency and Maintainability**
Since all the styles provided in TailwindCSS are defined in pre-existing classes, it can help ensure consistency and maintainability across your codebase.

- **Responsive Design**
TailwindCSS provides utility classes that make websites and web pages be viewed on different devices with different resolutions e.g. laptops, mobile phones, and iPads.

- **Customizable and Community Support**
TailwindCSS is highly customizable as it provides core concepts such as hover, focus, and other states, reusable styling, and functions and directives.

###Cons
TailwindCSS provides amazing benefits to developers but it's not an all-rounder as it poses some demerits, some of which are:

- **Ugly HTML**
The addition of multiple utility classes to the HTML file can sometimes look ugly and might have just posed the question, "Why not just use inline CSS styling?".

- **Coding Skills and Installation Process**
In order to properly use TailwindCSS, you need to be familiar with the usage of custom CSS and you also need to run the installation process that generates the CSS which may be time-consuming and require additional cost.

- **Increases HTML Files**
Since you do not have to write your own CSS rules but rather use the utility classes provided by TailwindCSS, this makes the HTML file larger than usual.

##Materialize
Materialize CSS is a front-end web development framework that is based on Google's Material Design guidelines. It provides a set of CSS classes and JavaScript components that make it easier to create responsive and mobile-friendly websites.

Materialize provides elements and components such as grids, typography, color, and imagery that are visually pleasing. Emphasis on different actions and components creates a visual guide for developers. It is also called Material Design.

You can also visit the Materialize [website](https://materializecss.com/) and [GitHub repository](https://github.com/dogfalo/materialize) which currently has garnered over 38k likes and has been forked over 4k times by developers.

[![Materialize GitHub page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pibur633rcfla3rwwo0p.png)](https://github.com/dogfalo/materialize)

###Installation of Materialize
Just like other CSS frameworks, Materialize provides a variety of ways to install and get started with using the framework. The major ways of getting started with Materialize are:

- **Download Materialize**
You can download Materialize to your computer based on your preference and expertise as it provides the standard version and the sass version, which contains the source SCSS files.

- **CDN**
You can also use Materialize right in the browser without any build steps.

- **NPM**
Another option to pull Materialize source files into your projects is to install Materialize through the node package manager.
`npm install materialize-css@next
`

###Pros
Materialize is a front-end web development framework that makes use of classic principles of outstanding design along with innovation and technology. Here are some of the pros of using Materialize:

- **Easy to Use**
Materialize is a front-end framework that provides easy-to-use syntax that makes it easy to implement designs and interactivity on websites and web pages.

- **Consistent and Responsive Design**
Materialize gives consistent design based on its guidelines and also makes it easier to create a responsive design on large and smaller screens because it provides a grid system and pre-designed elements.

- **Community Support**
Materialize also possess a strong online community via their GitHub repository that allows getting answers to problems or bugs encountered.

###Cons
Explained in detail below are some downsides of Materialize and also contribute to factors to consider when choosing your CSS framework of choice.

- **Requires Coding Skills**
Materialize requires that users have some prior knowledge of coding and in some cases JavaScript as well, which may not be suited for all users.

- **Large file size**
Materialize requires that users have some prior knowledge of coding and in some cases JavaScript as well, which may not be suited for all users.

- **Large file size**
Materialize contains pre-designed components that may result in a larger file size and can make load times slower for websites and web pages.

- **Customization is limited**
Even though Materialize provides consistent designs, their pre-designed components might be limiting for users who may want to make further adjustments.

- **Pricing**
Materialize also has a monthly subscription which may cause additional costs for developers.

##Custom CSS
Also referred to as CSS, Pure CSS, or Vanilla CSS, Custom CSS is a style sheet language used to describe the presentation of a document written in HTML (Hypertext Markup Language) or XML (eXtensible Markup Language).

Custom CSS is basically used to format the layout of a webpage or website. CSS was developed by World Wide Web Consortium (W3C) with its initial release on the 17th of December, 1996.

You can also visit the [website](https://www.w3.org/TR/CSS/#css) for more insights.
[![W3C website snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou5aj16jc9z3axhr98dr.png)](https://www.w3.org/TR/CSS/#css)

###Using Custom CSS
You can select from the below-listed options to get started with using custom CSS in your projects.

- **Inline CSS**
You can start using custom CSS by simply adding the style attribute to the HTML element that requires styling.

`<p style="color:blue;">An inline styling</p>`

- **Internal CSS**
This entails defining the style for a single HTML page, which is placed in the `<head>` section of the HTML page, within a `<style>` tag.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lmqgb8o18izy2oy25db.png)

- **External CSS**
The external CSS can be used to provide style for many HTML pages. To use this, simply add a <link> to the <head> section of each HTML page.

###Pros
Using custom CSS boasts several merits and some of which have been detailed below.

- **Better User Experience and Consistent Design**
Custom CSS makes websites and webpages more interactive and appealing to the eye thereby improving user experience. It also allows developers to ensure the style elements are used as appropriate across the web pages.

- **No Installation process is required**
There is no prior installation required to get started with custom CSS, unlike the frameworks.

- **Speed and Time Saving**
Since CSS enables you to use less code, as you can repeat several styles across web pages, this thereby enhances faster page speed and saves time.

- **Responsive Design**
Custom CSS enables developers to build websites and web pages that are visually appealing on small screens as well as larger screens with the use of media queries.

###Cons
There are a few demerits of using CSS. It is imperative to have this at the back of your mind when building projects with custom CSS. Some of these downsides are:

- **Coding Knowledge**
CSS requires users to have prior coding experience as it has various properties and values that must be correctly understood and applied, and CSS can be difficult to learn and master.

- **Time consuming and Effort**
Learning CSS requires a lot of time to learn and practice, as well as a lot of effort to actually master its usage and functionality.

- **Confusion Due to Levels**
Figuring out which CSS to learn can be quite confusing as there are various levels e.g. CSS2, and CSS3, which might confuse most beginners.

##Conclusion
This article covers a detailed comparison between Bootstrap and 3 other alternatives (Tailwind CSS, Materialize, and Custom CSS), you should be aware that there are other notable alternatives to Bootstrap that you can learn.

Learning Custom CSS is a basic requirement before proceeding to select a preferred CSS framework, this is to ensure you have appropriate coding skills before moving ahead to frameworks.

Selecting a CSS framework to use in your project should be based on the use case, development, or production of such a project, and sometimes might be based on personal preference.

Thank you for reading, kindly share your feedback in the comment section, and feel free to connect with me on [GitHub](https://github.com/badbatunde) | [Twitter](https://twitter.com/badbatunde) | and [LinkedIn](https://linkedin.com/in/badbatunde) 💖, and see you at the next one, cheers 🍸.