Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

tailwind
css
vanilla css

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

Aymen Bashir

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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:

button {
  font: bold 10pt Arial;
  border: 1px solid rgb(91, 192, 226);
  background: rgb(91, 192, 226);
  border-radius: 12%;
  height: 50px;
  width: 100px;
  color: white;
  cursor: pointer;
  align-items: center;
  text-size-adjust: 16;
  }

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

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:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
  Button
</button>

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:

widget

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.

RELATED TAGS

tailwind
css
vanilla css

CONTRIBUTOR

Aymen Bashir
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring