What is Tailwind CSS? Modern Web Designing

Ayesh Perera — Sat, 22 Jun 2024 07:52:13 +0000

What is Tailwind CSS?

Tailwind CSS is a utility-first framework with pre-designed components that you can use to design your own website with more customized features. It lets you write pre-designed components in your HTML form.

This approach allows you to design your own very unique and responsive web page without writing a single line of CSS.

Tailwind CSS was first created by Adam Wathan and Steve Schoger in November 2017. Their goal was to create a framework that prioritized utility and flexibility.

What is a Framework?

A framework for programming is a tool that provides reusable and ready-made components that can build applications more efficiently. Frameworks offer pre-written codes, tools, and libraries, allowing developers to focus on writing specific functions rather than writing the same function again and again.

In the web development industry, there are several programming frameworks we use to develop and design the web. Some of them are React, Angular, Express.js and Ruby.

The most famous CSS frameworks are Bootstrap and Tailwind.

Bootstrap vs Tailwind CSS

If you are a web developer or if you have any knowledge about web development, you either know about or have used Bootstrap and Tailwind CSS.
Both Bootstrap and Tailwind CSS are frontend frameworks, which means we use them to design the web page.

Both have their own strengths and weaknesses, and some developers prefer Bootstrap while others prefer Tailwind CSS. Today I am not going to do an in-depth comparison between Bootstrap and Tailwind CSS. I will do an article about the comparison soon.

Bootstrap is good for developers who need to build professional-looking websites. On the other hand, Tailwind CSS is excellent for those who want to do custom designs and optimize performance. Therefore, choosing between Bootstrap and Tailwind CSS totally depends on your project requirements.

How do use Tailwind CSS?

Using Tailwind CSS is very simple compared to Bootstrap and Vanilla CSS. You have to write your style code in the component class.

I'll show you an example of creating a simple button with rounded corners and inside text using both Vanila CSS and Tailwind CSS.

I'll first design this button using vanilla CSS.

With Vanilla CSS

<button class="btn">View More</button>

.btn {
  margin: 0 auto 1rem;
  padding: 0.5 mm x 2 mm;
  font-weight: 600;
  font-size: 1.5rem;
  background-color: #f97316;
  border-radius: 0.5rem;
  color: white;
}

With Tailwind CSS

<button class="mb-4 py-2 px-8 font-semibold text-2xl bg-orange-500 rounded-lg text-white">View More</button>

As you can see, you need to write all your style code in your HTML form and in the component class. So, you need to create a separate style.css file and write the code there.

If you need to learn deeply about Tailwind CSS, read this article. Tailwind CSS

Conclusion

In summary, Tailwind CSS offers a flexible approach to styling web pages with its predefined components, making it the best choice for developers who want to do their design without writing custom CSS.

In this article, we explored what Tailwind CSS is and did a little comparison between two famous CSS frameworks, which are Bootstrap and Tailwind CSS. And we designed a simple button using Tailwind CSS as well.

So, I hope you've learned something about Tailwind CSS from this article. See you in the next article.

DEV Community: Ayesh Perera

What is Tailwind CSS? Modern Web Designing