Introduction to Tailwind CSS

Tailwind CSS is the most popular utility-first CSS framework in the world for rapidly building custom user interfaces for the web.

Tailwind CSS can be used to make websites in the fastest and the easiest way.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

As per official Tailwind CSS documentation, Tailwind CSS is a highly customizable, low-level CSS framework that allows you to custom-build designs eliminating opinionated component styles that you would anyway want to override.

By the beginning of August 2020 it is estimated that it was downloaded by over 10 million times, making it one of the most rapidly growing CSS frameworks in the world at the time and by the end of September 2020 it is estimated that the official Tailwind CSS documentation was accessed by over 1 million developers worldwide.

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.

Why Tailwind CSS?

• Faster UI building process
• It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach. 

Advantages of Tailwind CSS:

• No more silly names for CSS classes and Id’s.
• Minimum lines of Code in CSS file.
• Makes the website responsive.
• CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.

Installation of Tailwind CSS:

Method 1: Install Tailwind via npm

• Step 1:npm init -y
• Step 2:npm install tailwindcss
• Step 3:Use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your CSS file. 
  @tailwind base; 
  @tailwind components; 
  @tailwind utilities;
• Step 4:npx tailwindcss init 
  This is used to create a config file to customize the designs. It is an optional step.
• Step 5:npx tailwindcss build styles.css -o output.css 
  This command is used to compile style.css is the file which has to be compiled and output.css is the file on which it has to be compiled.If the file output.css is not created earlier then it will automatically created.

Method 2: Using Tailwind via CDN

HTML :

But 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