What's the difference between normal CSS and Tailwind CSS?

Vanilla CSS

Vanilla CSS is another name for the basic CSS on which other CSS frameworks are based. Using Vanilla CSS gives full control and customizability in the styling of the page. Everything is written manually without using any framework, which increases the length of the code.

The simple button below is made using straightforward CSS. The CSS code is shown below:

Tailwind CSS

Tailwind CSS is a utility-based framework based on CSS. It provides a catalog of CSS classes that makes the process of styling more convenient. Tailwind is not a UI Kit like Bootstrap, Foundation, or Bulma. It does not provide ready-made design blocks. It simply provides classes to make custom designs and prevents the user from writing lengthy code, such as that in Vanilla CSS.

Tailwind provides developers with the customizability to make their own designs, which promotes a greater level of creativity as compared to the other frameworks that come with built-in UI components.

Let’s understand the difference through an example shown below:

In the above line of code, a simple button is defined using the following classes:

• bg-blue-500 class sets the background color of the button to blue. The number 500 specifies the shade.
• hover:bg-blue-700 class makes the button a slightly different shade of blue upon hovering.
• text-white makes the text ‘Button’ white.
• font-bold is used to bold the text.
• py-2 sets the height.
• px-4 sets the width.
• rounded-full rounds the shape of the button.

The outcome is shown below:

Now, we can observe how Vanilla CSS and Tailwind CSS differ. Tailwind CSS requires very few lines of code as compared to Vanilla CSS to make the same thing.