What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Why Tailwind CSS?

The 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 the traditional approach.

How to Install Tailwind CSS?

Method 1: Install Tailwind via npm

Step 1:npm init -y

Step 2:npm install tailwind css

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 tailwind css init
This is used to create a config file to customize the designs. It is an optional step.

Step 5:npx tailwind css build styles.css -o output.css
This command is used to compile style.css 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 be created.

Method 2: Using Tailwind via CDN

<!– add it to the head section of the html file ?>

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, and can’t install third-party plugins.

Creating The Tailwind Configuration File

To complete the Tailwind setup we can create an initial configuration file by using the following command within the project folder:

$ npx tailwindcss init

This command is creating a new file named tailwind.config.js with the following content inside:

Creating this file is optional and is only needed if you want to use it to insert additional settings here.

Advantages of Tailwind CSS:

No more silly names for CSS classes and Id’s.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Make the changes in the desired manner.
CSS is global in nature and if you 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.

Example:-

output:-

We have several classes used in this example. Leks check them one by one:

bg-green-300 – this class sets a green background (this bg prefix). The value 300 in the name is just the shade number.
border-green-600 – it’s similar to the previous class but it sets the element’s borders’ color to a slightly darker green.
border-b – this class does nothing more than set the border to be visible only at the bottom (“b” stands for “bottom”)
p-4 and m-4 those two classes make the margin and padding the size of 4 units. In Tailwind CSS, this is equivalent to 16px.
rounded – finally, this sets the rounded corners for the element.
px-4 and py-4 those two classes make the margin and padding the size of 4 units from x are for right and left & y are for top and bottom. In Tailwind CSS, this is equivalent to 16px.

Example:-