Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Tailwind CSS?
3.
Why Tailwind CSS?
4.
Installation of Tailwind CSS
4.1.
Method 1: Install Tailwind via npm
4.2.
Method 2: Using Tailwind CLI
4.3.
Method 3: Using PostCSS
4.4.
Method 4: Using CDN
5.
Example
6.
Advantages of Tailwind CSS
7.
Limitations of Tailwind
8.
Frequently Asked Questions
8.1.
What is Tailwind CSS?
8.2.
Is Tailwind CSS better than Bootstrap?
8.3.
What is Tailwind CSS used for?
8.4.
Is Tailwind faster than CSS?
9.
Conclusion
Last Updated: Mar 27, 2024
Easy

Tailwind CSS

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Tailwind CSS is a highly customizable and utility-first CSS framework that provides a set of pre-designed classes to style HTML elements. It is popular among developers for its speed and efficiency in building responsive and consistent user interfaces. CSS is used to style our HTML page. It adds styles like colors, fonts, positions, and animations to the elements. CSS makes the HTML content presentable. But maintaining CSS is hard and remembering all the classes and styling the elements is complex. We also have other frameworks like Bootstrap, but maintaining the code will be complex. So do we have other frameworks that can help us add the styling without having to write complex code and maintain it? Yes, we have a framework called Tailwind CSS.

Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is an open-source framework used to style your website in HTML without external CSS. It is a utility-first framework used for building custom user interfaces. It helps us build a website that stands out from the rest. You can style your website using the pre-defined utility classes without external CSS. Tailwind CSS is not a UI kit and doesn’t have a default kit or UI components. Let’s learn how to install Tailwind CSS on your machine now.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Why Tailwind CSS?

  • Pre-defined classes can be applied to HTML elements with Tailwind CSS. There is less need for creating custom CSS from scratch. 
     
  • Because all elements use the same set of classes, it is simpler to develop an application with a unified design. 
     
  • Because of its great degree of adaptability, developers can incorporate their unique styles and modify the framework to suit their requirements. 
     
  • It has a responsive grid system that makes it simple to create intricate layouts that fit various screen sizes and devices. 
     
  • Due to the standardized utility classes used by Tailwind CSS, it may be simpler for developers to work together on projects and comprehend one another's code.

Installation of Tailwind CSS

There are three ways to install Tailwind CSS on your machine. Let’s discuss them now.

Method 1: Install Tailwind via npm

Step 1: On the command prompt, after navigating to the folder, initialize the npm. Create tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init


Step 2: Configure the template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}


Step 3: Add the Tailwind directories to the CSS

@tailwind base;
@tailwind components;
@tailwind utilities;


Step 4: Start the Tailwind building process and use it in the HTML

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
 <h1 class="text-3xl font-bold underline">
   Hello Ninja!
 </h1>
</body>
</html> 

Method 2: Using Tailwind CLI

Step 1: Install Tailwind CLI using npm and create a config file “tailwind.config.js” to customize the designs.

npm install -D tailwindcss
npx tailwindcss init


Step 2: Configure and add the paths to all template files.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


Step 3: Add the tailwind directives to your main CSS file.

@tailwind base;
@tailwind components;
@tailwind utilities;


Step 4: Run the CLI tool to scan your templates and Tailwind CLI build process.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch


Step 5: Add the compiled CSS file to the <head> section of HMTL. Now you are good to start using Tailwind’s utility classes to style your content.

Method 3: Using PostCSS

Step 1: Install Tailwind CSS and its dependencies using npm and create a config file “tailwind.config.js.” 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init


Step 2: Add tailwindcss and autoprefixer to the file where PostCSS is configured on your machine.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}


Step 3: Configure and add the paths to all template files. (similar to Tailwind CLI).

Step 4: Add the tailwind directives to your main CSS file.

Step 5: Run the build process using npm

npm run dev


Step 6: Add the compiled CSS file to the <head> section of HMTL. Now you are good to start using Tailwind’s utility classes to style your content.

Must read, TCS NQT

Method 4: Using CDN

Add the CDN script to the <head> section of your HTML file.

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1 class="ml-5 font-bold">Tailwind CSS - Bold text</h1>
    <h1 class="ml-5 uppercase">Tailwind CSS - Uppercase text</h1>
    <h1 class="text-center">Tailwind CSS - centered text</h1>

    <div class="m-5 md:flex md:flex-wrap">
      <div class="bg-emerald-200 p-5 md:w-1/3">background colour</div>
    </div>
  </body>
</html>
Output

Example

Some examples of Tailwind CSS are:

Styling a button

Code

<!DOCTYPE html>
<html>
<head>
  <title>My Tailwind CSS Page</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
	<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 	Hello Ninja!
	</button>
</body>
</html>


Output

Output

Styling Navigation bar

Code

<nav class="bg-gray-800">
 <ul class="flex justify-between text-white">
   <li class="p-4 hover:bg-gray-700"><a href="#">Coding Ninjas</a></li>
   <li class="p-4 hover:bg-gray-700"><a href="#">Code Studio</a></li>
   <li class="p-4 hover:bg-gray-700"><a href="#">Library</a></li>
 </ul>
</nav>

Output

Output

Advantages of Tailwind CSS

Below are the advantages of Tailwind CSS.

  • Tailwind CSS provides pre-defined classes to style HTML elements. 
     
  • It can ensure consistency in the design of web applications. 
     
  • A large variety of utility classes are used to create unique and complex structures. 
     
  • It follows a mobile-first approach, i.e., it is designed to function well on all devices. Devices includes smartphones, tablets, and computers.

Recommended Topic, Difference Between CSS and SCSS

Limitations of Tailwind

  • Tailwind CSS has a steep learning curve. Beginners may face issues while going more deeper into all available classes in order to make designs as per their needs.
     
  • The file size of Tailwind CSS is large. As it consists of many CSS classes. Large file size may result in increased website loading time.
     
  • Using Tailwind CSS we may cannot make all designs. As it consist of limited set of classes for making common user interface components only.
    Check this out:  Versions of CSS

Frequently Asked Questions

What is Tailwind CSS?

Tailwind CSS is an open-source framework used to style your website in HTML without external CSS. It is a utility-first framework used for building custom user interfaces.

Is Tailwind CSS better than Bootstrap?

Bootstrap is efficient and makes our CSS easier. But Tailwind CSS is lighter and doesn’t have any pre-defined templates like Bootstrap. We can customize the styling in any way using Tailwind CSS.

What is Tailwind CSS used for?

Tailwind CSS gives pre-designed classes to quickly apply styles to HTML elements. It simplifies and speeds up the development process, and is often used in web development projects that require a fast and customizable user interface.

Is Tailwind faster than CSS?

It is not faster than CSS, they both generate the same CSS code. However, Tailwind can speed up the development process by providing pre-designed utility classes that can be quickly applied to HTML elements, reducing the need to write custom CSS from scratch.

Conclusion

In this article, we have discussed the concept of Tailwind CSS. We have also discussed its installation. We have also taken some examples using Tailwind CSS. Tailwind CSS can be used to style our HTML. 

We hope this article helped you to get a better understanding of the Tailwind CSS concept. Please check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Please upvote our blog to help the other ninjas grow.

Happy Coding!

Previous article
CSS Sizing Units
Next article
Difference Between CSS and SCSS
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass