Introduction to Tailwind CSS

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.

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.

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>

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

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

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

Why use Tailwind over other CSS framework?

Let's see why Tailwind is preferred over other CSS frameworks in detail :

1. Customization and Flexibility: Tailwind provides a wide range of utility classes that allow developers to quickly style elements without writing custom CSS. It offers a highly customizable and flexible design system, enabling developers to create unique and visually appealing user interfaces. Tailwind's utility classes can be easily combined and composed to build complex designs without the need for excessive custom CSS.

2. Rapid Development: With Tailwind, developers can style their web pages directly in the HTML markup using pre-defined utility classes. This approach eliminates the need to constantly switch between HTML and CSS files, streamlining the development process. Tailwind's utility classes are intuitive and descriptive, making it easier for developers to understand and maintain the codebase.

3. No Opinionated Styles: Unlike some other CSS frameworks, Tailwind does not impose a specific design style or visual aesthetic. It provides a set of low-level utility classes that allow developers to create their own design system from scratch. This flexibility enables developers to build user interfaces that align with their project's unique design requirements.

4. Responsive Design: Tailwind includes a comprehensive set of responsive utility classes that make it easy to create responsive designs. Developers can quickly specify different styles for different screen sizes using Tailwind's responsive modifiers. This approach eliminates the need for writing complex media queries and simplifies the process of creating responsive layouts.

5. Performance Optimization: Tailwind generates small and efficient CSS files by including only the styles that are used in the project. It uses a tool called PurgeCSS to remove unused CSS classes during the production build, resulting in smaller file sizes and faster page load times. This performance optimization is especially beneficial for large-scale projects where CSS file size can impact website performance.

6. Active Community and Ecosystem: Tailwind has a vibrant and growing community of developers who contribute to its development, share resources, and provide support. The Tailwind ecosystem includes various plugins, UI components, and tools that extend its functionality and facilitate rapid development. The active community ensures that Tailwind stays up to date with the latest web development trends and best practices.

7. Utility-First Approach: Tailwind follows a utility-first approach, which means it provides a comprehensive set of low-level utility classes that can be used to style elements directly in the HTML markup. This approach differs from traditional CSS frameworks that often provide pre-designed components or higher-level abstractions. By focusing on utility classes, Tailwind gives developers fine-grained control over the styling of their web pages, allowing for greater flexibility and customization.

8. Easy Learning Curve: Tailwind has a relatively easy learning curve compared to some other CSS frameworks. Its utility classes are intuitive and self-explanatory, making it easier for developers to understand and start using them quickly. The documentation is comprehensive and provides clear examples, reducing the time required to learn and implement Tailwind in projects. Additionally, the consistency and predictability of Tailwind's utility classes make it easier to reason about the styling of elements throughout the codebase.

Frequently Asked Questions

What is the use of Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs directly in your markup.

Is Tailwind better than Bootstrap?

Whether Tailwind is better than Bootstrap depends on specific needs: Tailwind for utility-first, custom designs; Bootstrap for out-of-the-box components.

Is Tailwind hard to learn?

Tailwind CSS has a learning curve due to its utility-first approach, but many find it straightforward once familiar with the concept.

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.