react-tailwind-generator

🎨 React Tailwind Component Generator

🚀 A generator for React components styled with Tailwind CSS. Save time by automatically creating buttons, cards, modals, and more, with customizable styles and props.

📦 Installation

Install the package globally using npm or yarn:

npm install -g react-tailwind-generator

🚀 Usage

1️⃣ Generate a Component via CLI

You can generate a JSX component via command line:

Generate a JSX or TypeScript (TSX) Component

You can generate a component via command line using the following syntax:

npx react-tailwind-generator generate <ComponentName> <ComponentType> [-c "<TailwindClasses>"] [-t] [-p "<Component_Directory>"]

or using the shorthand:

npx rtg g <ComponentName> <ComponentType> [-c "<TailwindClasses>"] [-t] [-p "<Component_Directory>"]

Parameters

🔹 <ComponentName>: The name of the component you want to create (e.g., CloseButton, InfoCard)
🔹 <ComponentType>: The type of component you want to create (see available types below).
🔹 <TailwindClasses>: The Tailwind CSS classes to apply to the component (e.g., "px-4 py-2 bg-blue-500 text-white").
🔹 <Component_Directory>: The directory where the component will be saved (default is ./src/components).
🔹 -t: Add this flag to generate a TypeScript component.

Examples

Generate a JSX Component:

npx react-tailwind-generator generate Button button -c "p-4 bg-green-500 text-white" -p "./src/components/home"

Generate a TypeScript (TSX) Component:

npx react-tailwind-generator generate Button button -c "p-4 bg-green-500 text-white" -t -p "./src/components/home"

or using the shorthand:

npx rtg g Button button -c "p-4 bg-green-500 text-white" -t -p "./src/components/home"

🎨 Available component types are:

Component type	Description
button	A button with text, onClick, disabled, etc.
card	A styled container to display content.
modal	A modal window with display management.
navbar	A navigation bar with content.
footer	A footer with content.
alert	An alert message with a close button.
badge	A badge with text or number.
input	An input field with a placeholder.
checkbox	A checkbox with label and checked state.
radio	A radio button with label and checked state.
select	A select dropdown with options.
label	A label with text and color.
form	A form with input fields and submit button.
spinner	A loading spinner with size and color.
tooltip	A tooltip with text and position.
avatar	An avatar image with size and shape.
accordion	An accordion with sections and content.
breadcrumb	A breadcrumb trail with links.
dropdown	A dropdown menu with options.
tabs	A tabbed interface with content.
table	A table with rows, columns, and data.

2️⃣ Interactive mode (easier 📌)

Use the interactive mode to guide you through the component creation process:

npx react-tailwind-generator interactive

🔹 The tool will prompt you to:

• Enter the component name.

• Choose the component type.

• Specify Tailwind CSS classes or use the default styles.

• Choose whether to generate a TypeScript component or not.

• Enter the directory where the component will be saved (default is ./src/components).

🛠 Examples

1️⃣ Generate a custom button

npx react-tailwind-generator generate  Button button -c "px-4 py-2 bg-green-500 text-white" 

📌 Result in ./src/components/Button.jsx:

import React from "react";

export const Button = ({ 
    text = "Button",
    disabled = false,
    type = "button",
    onClick = () => {},
    ariaLabel,
    className: propClassName = ""
}) => {

    const defaultClassName = propClassName;
    const classes = `px-4 py-2 bg-green-500 text-white ${disabled 
                    ? '!bg-gray-400 !cursor-not-allowed' 
                    : defaultClassName}`.trim();

    return (
        <button
            className={classes}
            onClick={!disabled ? onClick : undefined}
            type={type}
            disabled={disabled}
            aria-label={ariaLabel || text}
            role="button"
        >
            {text}
        </button>
    );
};

2️⃣ Generate a card

npx react-tailwind-generator generate  InfoCard card -c "p-4 shadow-md rounded-lg" 

📌 Result in ./src/components/InfoCard.jsx:

import React from "react";

export const InfoCard = ({ 
    header = 'Default Header',
    footer = 'Default Footer',
    title = 'Default Title', 
    content = 'Default Content', 
    className : propClassName = '', 
}) => {

    const defaultClassName = propClassName;
    const classes = "p-4 shadow-md rounded-lg" || defaultClassName;

    return (
        <div className={classes}>
            {header && (
                <div className="text-lg font-semibold text-gray-700 mb-4">
                    {header}
                </div>
            )}

            {title && (
                <h1 className="text-2xl font-bold text-gray-900 mb-4">
                    {title}
                </h1>
            )}

            <div className="text-gray-600 mb-4">
                {content}
            </div>

            {footer && (
                <div className="border-t border-gray-200 pt-4 text-sm text-gray-500">
                    {footer}
                </div>
            )}
        </div>
    );
};

🏗 Planned improvements

Here are some features we’re planning to add:

• Customizable Themes: Support for custom themes and color schemes.

• Advanced TypeScript Support: Improved TypeScript integration with better type safety.

• Storybook Integration: Automatic generation of Storybook files for component documentation.

• Jest Testing: Generate Jest tests to verify component functionality.

💖 Support & Sponsoring

If this project helps you, you can support me via GitHub Sponsors.
Your support helps me to continue developing and improving this tool. 🚀

👨‍💻 Contribute

If you want to improve this project:

Clone the repo

git clone https://github.com/adelekekismath/react-tailwind-generator.git

Install dependencies

npm install

Make Your Changes: Add new features, fix bugs, or improve documentation.

Create a Pull Request: Submit your changes for review.

🙏 Credits

• Author: Kismath Adeleke

• Repository: GitHub
  

Why Use This Tool?

• Save Time: Automate the creation of React components.

• Consistency: Ensure consistent styling with Tailwind CSS.

• Flexibility: Customize components with props and Tailwind classes.

• Ease of Use: Simple CLI and interactive mode for quick setup.

Feedback
If you have any feedback or suggestions, please open an issue on GitHub.

## 📜 License MIT © 2025 - Kismath Adeleke