Home > Others > Building Reusable React Components Using Tailwind

Building Reusable React Components Using Tailwind

A Button Group consisting of a primary and secondary button

Building Reusable React Components Using Tailwind

Building Reusable React Components Using Tailwind

Tilo Mitra

2020-05-25T11:00:00+00:00
2020-05-26T15:09:03+00:00

In this post, we’ll look at several different ways you can build reusable React components that leverage Tailwind under the hood while exposing a nice interface to other components. This will improve your code by moving from long lists of class names to semantic props that are easier to read and maintain.

You will need to have worked with React in order to get a good understanding of this post.

Tailwind is a very popular CSS framework that provides low-level utility classes to help developers build custom designs. It’s grown in popularity over the last few years because it solves two problems really well:

  1. Tailwind makes it easy to make iterative changes to HTML without digging through stylesheets to find matching CSS selectors.
  2. Tailwind has sane conventions and defaults. This makes it easy for people to get started without writing CSS from scratch.

Add the comprehensive documentation and it’s no surprise why Tailwind is so popular.

These methods will help you transform code that looks like this:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Enable
</button>

To code that looks like this:

<Button size="sm" textColor="white" bgColor="blue-500">
  Enable
</Button>

The difference between both snippets is that in the first we made use of a standard HTML button tag, while the second used a

Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.