How to create a reusable Button component in ReactJS with TailwindCSS

Recently, while working on a website, I discovered I would need to create a button component to ease my workflow (as there were quite a number of buttons to be added).

However, after some trial and error, plus searching through forums and blogs, I decided to seek another solution to my problem.

That solution was with Styled Components and it was pretty straightforward. All I needed were props!

So this got me thinking: could I also utilize props to create a button component with Tailwind CSS? This is my solution:

Step One: Create a React app, alongside TailwindCSS

With npm:

npx create-react-app my-project
cd my-project

npm install -D tailwindcss
npx tailwindcss init

With yarn:

yarn create react-app react-tailwind-css-stater
yarn add -D tailwindcss postcss autoprefixer

yarn tailwindcss init -p

In your global CSS file, add the following:

@tailwind base;
@tailwind components;
@tailwind utilities

Once you’ve done that, you should set up your tailwind.config.js file and start up your dev server with npm start or yarn run dev.

Just in case you need to set up custom colors in your tailwind.config.js file, now is the time to do so. Here is how mine looks.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
      'darkBlue': '#151421',
      'whiteBG': '#FFFFFF',
      },
    },
  },
  plugins: [],
}

Next, create a button component in a folder called components. I’ll name mine Button

//inside Button.js
const Button = () => {
return (
  <button></button>
)
};

export default Button;

Now for the fun part: we pass props to the component to help us customize each button to our desired taste.

const Button = ({bg, btnText, textColor}) => {
return (
<button></button>
)
};

export default Button;

We’ve now added 3 props to the component. bg for the background of the button, btnText for the text content and textColor for the text color. Now let’s see how to implement this into our Tailwind utility classes.

const Button = ({bg, btnText, textColor}) => {
return (
<button className={`bg-${bg} py-4 px-7 text-${textColor}`}>{btnText}</button>
)
};

export default Button;

As seen here, we’ve used backticks instead of quotes so we can use our prop values. Next, we import our Button component in any .js file we want the component to appear in, and use the props we’ve created. I have named mine App.js

//import button component in App.js
import Button from "./components/Button";

const App = () => {
return (
  <Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}></Button>
//could also be written as
<Button bg={'darkBlue'} btnText={'Follow me'} textColor={'whiteBG'}/>

//remember I added custom colors in my tailwind config file, so you color names may differ
)
}

In the example above, we have used the props accordingly. Notice how in App.js , the Button component could be written in both ways: opening and closing tags & self-closing tags.

I now have many button options based on color, and text content based on how many my project demands.

If you found this post helpful, please share with a friend and also follow me.

Thanks for reading :)