DEV Community

Rakshambika
Rakshambika

Posted on

Tailwind CSS

#webdev #tailwindcss #css

When building websites, CSS is used to style HTML elements. Traditionally, we create CSS classes and write styles inside a separate CSS file.

Tailwind CSS takes a different approach. It provides small, reusable utility classes that we can directly use in our HTML or JSX to style elements.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework.

Instead of writing custom CSS like:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

We can use Tailwind utility classes:

<button className="bg-blue-500 text-white px-5 py-2 rounded-lg">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

Each class performs a specific styling task.

For example:

  • bg-blue-500 → background color
  • text-white → text color
  • px-5 → horizontal padding
  • py-2 → vertical padding
  • rounded-lg → border radius

Why Do We Need Tailwind CSS?

Writing CSS for every component can become time-consuming, especially in large applications.

Tailwind helps us build interfaces faster because we can apply styles directly using predefined utility classes.

Without Tailwind

<button className="my-button">
  Login
</button>
.my-button {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

With Tailwind

<button className="bg-black text-white px-5 py-2 rounded-lg">
  Login
</button>
Enter fullscreen mode Exit fullscreen mode

We don't need to create a separate CSS class for this button.

Responsive Design

  • One of the useful features of Tailwind is its responsive design system.
  • We can apply different styles at different screen sizes.

For example:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
Enter fullscreen mode Exit fullscreen mode

This means:

  • grid-cols-1 → one column by default
  • md:grid-cols-2 → two columns on medium screens
  • lg:grid-cols-4 → four columns on large screens

So the same component can automatically adapt to different screen sizes.

Advantages of Tailwind CSS

1. Faster Development

We can style elements directly without creating many custom CSS classes.

2. Responsive Design

Tailwind provides responsive utility classes that make it easier to build mobile-friendly websites.

3. Consistent Design

Tailwind provides predefined spacing, colors, font sizes, and other design utilities.

4. Works Well with React

Since styles can be written directly in JSX using className, Tailwind is convenient for React applications.

5. Less Custom CSS

For many components, we can build the UI without writing separate CSS rules.

Top comments (0)