Reusable Components with Tailwind CSS and CSS: Comparison and Practical Uses

introduction

Can you imagine being able to change the style of a button on your entire website with just one class? Los reusable components they allow just that. They are essential for optimizing the efficiency, maintainability and consistency of code in web projects. Over the years, Traditional CSS it has been the base tool for defining styles, but now Tailwind CSS, with its “utility-first” approach, has gained popularity as a quick and efficient alternative for creating these components.

The purpose 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?

Un 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 across the application.

In large projects, reusable components allow teams to collaborate more efficiently, reducing repetitive code and making it easier to update styles or functionality across the application in a centralized manner.

Brief introduction to CSS and Tailwind CSS in Nextjs

Traditional CSS:

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

Tailwind CSS:

• In Next.js, Tailwind CSS maintains its “utility-first” approach, allowing predefined classes to be used directly in JSX files. To integrate it, it is necessary to configure some files, such as tailwind.config.js, specific for use in Next.js.

Component creation comparison

‍In this section, we'll explore how reusable components are created using Traditional CSS and Tailwind CSS. We'll compare both approaches through practical examples, such as creating buttons and product cards. We will see how each method manages the stylization, the organization of the code, 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 the styles in a separate CSS file, and then applying the class to the button in the HTML.

‍Code example (traditional CSS):

In this approach, we define all the styles in the file CSS (styles.css) and then we apply the class .btn-basic to the button. So, every time you need this button, you just have to add the class to 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 HTML to apply styles.

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

Reusable buttons in CSS

Now I'll 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, maintaining a clean and modular code. Let's move on to the demonstration.

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

To be able to see the complete code in the following link and also how it works https://codepen.io/karlacabanas01/pen/PoMLBNv

2. Product Card with CSS

Imagine that you want to show 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 make it look attractive.

The next 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 title of the card.
• 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.

When using Props, the component adapts to different uses without modifying its structure.

To review the full code in 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 links to social networks. They are ideal for portfolios, user profiles and team pages. Next, we'll look at how to create a reusable profile card with both Tailwind CSS As with Traditional CSS.

Here you can see the code in tailwind:

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

Tailwind:

CSS:

Styles:

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

4. Thumbnail Image Carousel

The image carousel with thumbnails allows you to display a main image and navigate through related images using thumbnails. It's ideal for product galleries, portfolios and visual presentations. Next, we'll explore how to create this component using Tailwind CSS and Traditional CSS.

Tailwind:

CSS:

Style:

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

Mini Store with React and Tailwind CSS

In this practical example, we'll 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 stylize efficiently 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'll be using the following components:

• Navbar: Show the store title and a product counter in the cart.
• ProductList and ProductCard: They render the product list and each individual card.
• Card: Show the products added to the cart.
• App: Main component that connects all the others.

Example:

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

Step 2: Product Listing

ProductList contains an array of 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 ProductCart:

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

Step 3: Implementing the shopping cart

Cart shows the selected products and allows the user to proceed with the payment. If the cart is empty, a message is displayed stating this.

Step 4: Combining everything in App

App utilizes UseState to manage the status of the cart. 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 functionality, such as removing products from the cart or integrating a real API. Experiment and build your own online store!

To be able to view the full code:https://codepen.io/karlacabanas01/pen/JjgqwPv?editors=1010

Advantages and disadvantages

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

When to use Tailwind and when traditional CSS

• Tailwind CSS it's ideal when you're looking for 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 It's the best option when you need detailed control of styles or if you're working on a project that requires advanced customization.

Conclusion

In short, 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. In addition, the concrete implementation of the style, whether with CSS or Tailwind, is hidden from those who use the components. This allows you to change the way a component is styled without affecting its use, as long as the public properties (APIs) are not modified.

Additional Resources

• Rapidly build modern websites without ever leaving your HTML
• CSS: Cascading Style Sheets

‍