Tailwind CSS

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.

Tailwind 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 the complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

Tailwind CSS

Tailwind CSS CDN Link:

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>

Note: There are some limitations when CDN is used. Some of them are:

• Customize Tailwind’s default theme can’t be used
• Directives like @apply, @variants, etc can’t be used
• Can’t install third-party plugins

Installation of Tailwind CSS:

Through npm:

• 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}

Through yarn:

• 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 describes how to change the background color on mouse hover.

Output:

Advantages of Tailwind CSS

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

Disadvantages of Tailwind CSS

• There are missing headers, and navigation components.
• It takes time to learn how to implement inbuilt classes.

Complete References