Lucious

Posted on Feb 5

Building Reusable Buttons in Next.js with Tailwind CSS

#javascript #beginners #frontend #nextjs

Today we will discuss building buttons and making it reusable in Next. js using tailwind CSS.

What You’ll Learn in This Guide

In this article, you will learn how to build a reusable and customizable button component using Next.js and Tailwind CSS. By the end of this tutorial, you’ll be able to:

✅ Set up a Next.js project with Tailwind CSS.
✅ Create a reusable button component that supports multiple styles.
✅ Use props to customize button appearance (primary, secondary).
✅ Implement hover effects, transitions, and responsive styles.
✅ Reuse the button across different pages in a Next.js application.

This guide is perfect for beginners who want to improve their UI development skills by building modular and maintainable components. Let’s dive in! 🚀

But first, what is next.JS and Tailwind CSS?

What is Next.js?

Next.js is a powerful React framework that makes it easy to build fast and scalable web applications. It provides features like:

. Server-side rendering (SSR) for improved performance.

. Static site generation (SSG) to pre-render pages at build time.

. API routes to handle backend logic within a Next.js project.

. Automatic routing and file-based structure simplifies project organization.

Next.js is widely used for modern web applications due to its speed, SEO optimization, and developer-friendly features.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to style components quickly using predefined classes. Unlike traditional CSS frameworks like Bootstrap, Tailwind provides:

Utility classes instead of pre-designed components.
Customizability with theme extension.
Responsive design built-in mobile-first approach.
No need for writing custom CSS—everything is handled with class-based styling.
With Tailwind, developers can rapidly build and style UI components without writing lengthy CSS files.

Now let's set up a Next.js Project with Tailwind CSS
You can skip this if you already have NextJS installed.

✅ Set up a Next.js project with Tailwind CSS.

1. Install Next.js

To create a new Next.js project, run:

npx create-next-app@latest my-next-app
cd my-next-app

*Install Tailwind CSS
Once inside your project folder, install Tailwind CSS with:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✅ Create a reusable button component that supports multiple styles.

*Configure tailwind.config.js

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Key	Purpose
content	Targets which of the files Tailwind scans for class names to generate only the necessary styles.
theme	Performs the customization of Tailwind’s default theme (colors, spacing, typography, etc.). however you choose to design it.
plugins	Adds extra functionality by including official or third-party Tailwind plugins.

Add Tailwind styles in globals.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ Use props to customize button appearance (primary, secondary).

*Creating a Reusable Button Component

Inside the components folder, create Button.js file:

export default function Button({ children, variant = "primary", onClick }) {
  const styles = "px-4 py-2 rounded-md font-medium transition-all";
  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600",
    secondary: "bg-gray-500 text-white hover:bg-gray-600",
    tertiary: "bg-red-500 text-white hover:bg-red-600",
  };

  return (
    <button onClick={onClick} className={`${styles} ${variants[variant]}`}>
      {children}
    </button>
  );
}

✅ Reuse the button across different pages in a Next.js application.

*Using the Button Component

📌 Using File pages/index.js

import Button from "../components/Button";
export default function Page() {
  return (
    <div className="flex flex-col items-center space-y-4 mt-10">
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="tertiary">Tetiary Button</Button>
    </div>
  );
}

Render to the screen

Use layout.js or page.js just to view the buttons

import Page from "./pages/index"; // Correct import

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <Page /> {/* Must be used as a JSX component */}
    </div>
  );
}

📌 TIPS

✅ Props-Based Styling → variant is passed as a prop (primary, secondary, tetiary).

✅ Reusable & Scalable → You can easily extend it with more styles.

Folder Structure

*Explain the Folder Structure
Adding a simple file structure will help beginners understand where files should be placed.
✅ Example

my-next-app/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── Button.js     # Reusable button
│   ├── pages/            # Next.js pages (routes)
│   │   ├── index.js      # Main page
│   ├── styles/           # Global styles
│   │   ├── globals.css   # Tailwind global styles
├── tailwind.config.js    # Tailwind configuration
├── package.json          # Project dependencies
├── next.config.js        # Next.js configuration

DEV Community