Why Tailwind CSS?

Tailwind CSS can significantly speed up your UI building process by eliminating the need of building custom css classes and replacing them with utility classes similar to Bootstrap.

Personally I have used Bootstrap 4 as well as Foundation CSS in the past yet I found it lacks some fundamental classes as well as functionality and struggles past a certain width of screen size so I was eager to try out Tailwind CSS as an alternative.

In a professional capacity, working through large CSS files with often non-specific class names or with numerous media queries can be tedious and complex when taking over from other developers. Utilizing Tailwind CSS reduces the size of your CSS file and makes the website responsive.

Installation:

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

Optional step.This is used to create a config file to customize the designs.

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.

Responsive Web Development

In this example we take the Paytm website and update it with TailwindCSS classes in order to make it responsive.

In the below image we can see and example of the Paytm website and how it has not been optimised for mobile devices.

Below we can see how Tailwind CSS updates are made for a responsive user friendly and optimised experience.

Let's look at the code, as you can see we have implemented Tailwind classes within the html and removed the need for an external stylesheet.

Checkout Dee's Github for code alternatively, checkout Live Paytm Responsive Clone here.