Reusable Components with Tailwind CSS and Traditional CSS: Comparison and Best Practices

Introduction

Can you imagine being able to change the style of a button across your entire website with just one class? Reusable components allow exactly that. They are fundamental to optimizing efficiency, maintainability, and code consistency in web projects. Over the years, traditional CSS has been the base tool for defining styles, but now Tailwind CSS, with its "utility-first" approach, has gained popularity as a fast and efficient alternative for creating these components.

The goal of this article is to compare how reusable components are created using traditional CSS and Tailwind CSS, highlighting the advantages and disadvantages of each approach, and offering suggestions on when to use one or the other depending on the type of project.

What is a reusable component?

A reusable component is a block of code that can be used multiple times in different parts of a project without having to rewrite it. This makes it easier for both individuals and teams to work faster and more efficiently, sharing solutions and maintaining a consistent design throughout the application.

In large projects, reusable components allow teams to collaborate more efficiently, as they reduce repetitive code and facilitate updating styles or functionalities throughout the application in a centralized way.

Brief introduction to CSS and Tailwind CSS in Nextjs

Traditional CSS:

In Next.js, traditional CSS is written in .css files and can also use CSS Modules, which limit styles to specific components. Styles are applied through global classes, IDs, or selectors, and must be manually organized by developers.

Tailwind CSS:

In Next.js, Tailwind CSS maintains its "utility-first" approach, allowing the use of predefined classes directly in JSX files. To integrate it, some files need to be configured, such as tailwind.config.js, specific for its use in Next.js.

Comparison of component creation

‍In this section, we will explore how reusable components are created using traditional CSS and Tailwind CSS. We will compare both approaches through practical examples, such as creating buttons and product cards. We will see how each method handles styling, code organization, and how these components can be efficiently applied in different areas of a web project.

‍1. Basic button

‍First, let's see how to create a button using traditional CSS. This method involves defining styles in a separate CSS file, then applying the class to the button in the HTML.

‍Code example (traditional CSS):

In this approach, we define all styles in the CSS file (styles.css) and then apply the class .btn-basic to the button. So, whenever you need this button, you just have to add the class in the HTML.

Code example (Tailwind CSS):

Now, let's see how to create the same button using Tailwind CSS, which uses utility classes directly in the HTML to apply styles.

The button looks the same in both cases because, although the codes are applied differently, the defined styles are equivalent, resulting in the same visual appearance.

Reusable buttons in CSS

Now I will show you how to create a reusable button component in React using only CSS. This allows us to easily customize the button with different styles and sizes, keeping the code clean and modular. Let's move on to the demonstration.

Here are the CSS styles for the reusable button component. These styles define a base class for the button and variations to change color and size.

To see the complete code at the following link and also its functionality https://codepen.io/karlacabanas01/pen/PoMLBNv

2. Product Card with CSS

Imagine you want to display a product on your website, with an image, a title, a description, and a button to add to the cart. This set of elements is known as a product card, and with CSS we can style it to look attractive.

The following component is a generic card that accepts several properties (props) such as title, description, image, and a set of actions (buttons). This allows great flexibility to reuse the component in different contexts.

Dynamic Props:

title: The card's title.
description: A brief description of the content.
image: URL of an image that appears at the top.
actions: A list of custom buttons with text, styles, and actions.

By using props, the component adapts to different uses without modifying its structure.

To review the complete code at the following linkhttps://codepen.io/karlacabanas01/pen/dyxrjma

3. Profile Card

Profile cards quickly and attractively present essential information about a person, such as their name, role, and social media links. They are ideal for portfolios, user profiles, and team pages. Next, we will see how to create a reusable profile card both with Tailwind CSS and with traditional CSS.

Here you can see the code in Tailwind:

https://codepen.io/karlacabanas01/pen/MWNqmpV

Tailwind:

CSS:

Styles:

But now, let's see this same example in a more reusable way. What do I mean by this? That the same code can be used in several parts of the page without needing to duplicate it. For this case, we will implement the example using CSS together with React.

4. Image Carousel with Thumbnails

The image carousel with thumbnails allows displaying a main image and navigating through related ones via thumbnails. It is ideal for product galleries, portfolios, and visual presentations. Next, we will explore how to create this component using Tailwind CSS and traditional CSS.

Tailwind:

CSS:

Style:

Here you can review the complete code https://codepen.io/karlacabanas01/pen/vYogmZp?editors=1000

Mini Store with React and Tailwind CSS

In this practical example, we will build a simple online store application that includes a product listing, a dynamic shopping cart, and a navigation bar. We will use React to create reusable components and Tailwind CSS to efficiently style with utility classes. This project shows how to combine both approaches to create scalable and elegant web applications.

Step 1: Dividing the application into components

In React, dividing the interface into small reusable components makes development more efficient and scalable. For this application, we will use the following components:

Navbar: Displays the store title and a product count in the cart.
ProductList and ProductCard: Render the product listing and each individual card.
Cart: Displays the products added to the cart.
App: Main component that connects all others.

Example:

The navigation bar (Navbar) is a simple component that shows the store title and a dynamic cart counter. It receives the number of products in the cart as a prop.

Step 2: Product listing

ProductList contains an array with product data (name, price, image, etc.) and renders each one using the ProductCard component. This makes the listing dynamic and easy to maintain.

We also have the ProductCard:

ProductCard can be used for any product, you just need to pass different props.

Step 3: Implementing the shopping cart

Cart displays the selected products and allows the user to proceed to checkout. If the cart is empty, a message is shown indicating it.

Step 4: Combining everything in App

App uses useState to manage the cart state. The addToCart function is passed as a prop to ProductList to add selected products to the cart."

This example is just the beginning. You can add new features, such as removing products from the cart or integrating a real API. Experiment and build your own online store!

To see the complete code:https://codepen.io/karlacabanas01/pen/JjgqwPv?editors=1010

Advantages and disadvantages

💡Tip: If your priority is rapid development and you want to have direct styling in the HTML, Tailwind CSS can be the ideal choice. On the other hand, if you prefer structured and centralized code, traditional CSS may be more suitable. Both approaches have their strengths, and the choice will depend on the type of project and the work style you prefer.

When to use Tailwind and when traditional CSS

Tailwind CSS is ideal when you seek speed in development and don’t want to waste time writing CSS from scratch. Perfect for prototypes or projects where time is a key factor.
Traditional CSS is the best option when you need detailed control over styles or if you are working on a project that requires advanced customization.

Conclusion

In summary, the choice between Tailwind CSS and traditional CSS depends on the type of project and the needs of the development team. Both approaches have their strengths and challenges, but Tailwind’s "utility-first" approach allows you to create reusable components more quickly, while traditional CSS provides greater control and organization. Additionally, the concrete implementation of the style, whether with CSS or Tailwind, is hidden from those who use the components. This allows changing the way a component is styled without affecting its use, as long as the public properties (API) are not modified.

Additional resources

Ready to optimize your web development with reusable components?

At Kranio, we have frontend development experts who will help you implement efficient solutions using Tailwind CSS and traditional CSS, ensuring your projects are scalable, maintainable, and high performance. Contact us and discover how we can boost your development team’s efficiency.