Tailwind CSS

  • Last Updated :31 Aug, 2022

Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

Why Tailwind CSS ?

As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. Tailwind has come with inbuilt a lot of features and styles for users to choose from and is also used to reduce the tendency of writing CSS code and create a beautiful custom UI. It will help you to overcome complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.


Installation of Tailwind CSS:

Basically Tailwind is available on npm and you can install it using the following command:

npm install tailwindcss

After that create ad Tailwind configuration file using the following command:

npm tailwind init {name of file}


You can install tailwind by using the yarn command:

yarn add tailwindcss

After that create ad Tailwind configuration file using the following command:

yarn tailwind init {name of file}

Example: It is a basic example of Tailwind CSS that describe how to change background color on mouse hover.

 <!DOCTYPE html>
 <html lang="en">
 <meta charset="UTF-8">
 <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css"
 <div class="h-full border-2 border-gray-200
 border-opacity-60 rounded-lg
 <div class="p-6 hover:bg-green-600
 hover:text-white transition
 duration-300 ease-in">
 <h1 class="text-2xl font-semibold mb-3">




  • Highly Customizable.
  • Enables building complex responsive layout.
  • Responsive and development is easy.
  • Components creation is easy.


  • There is missing headers, navigation components.
  • It take time to learn how to implement inbuilt classes.

Learn more about Tailwind CSS:


My Personal Notesarrow_drop_up

Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.